diff --git a/website/src/custom-elements/domestic-internal/README.md b/website/src/custom-elements/domestic-internal/README.md new file mode 100644 index 00000000..4d486155 --- /dev/null +++ b/website/src/custom-elements/domestic-internal/README.md @@ -0,0 +1,4 @@ +## `domestic-internal` + +与 `domestic` 的区别是:这里包含的自定义元素是专用于本单页面应用的,并不 +适用于通常场景。 diff --git a/website/src/pages/SyntaxReference/RotextExample/MainCard.tsx b/website/src/custom-elements/domestic-internal/rotext-example/MainCard.tsx similarity index 100% rename from website/src/pages/SyntaxReference/RotextExample/MainCard.tsx rename to website/src/custom-elements/domestic-internal/rotext-example/MainCard.tsx diff --git a/website/src/pages/SyntaxReference/RotextExample/create-store.ts b/website/src/custom-elements/domestic-internal/rotext-example/create-store.ts similarity index 99% rename from website/src/pages/SyntaxReference/RotextExample/create-store.ts rename to website/src/custom-elements/domestic-internal/rotext-example/create-store.ts index e9a40b47..7b542243 100644 --- a/website/src/pages/SyntaxReference/RotextExample/create-store.ts +++ b/website/src/custom-elements/domestic-internal/rotext-example/create-store.ts @@ -1,7 +1,7 @@ import { createEffect, createMemo, createSignal, on } from "solid-js"; import { useRotextProcessorsStore } from "../../../contexts/rotext-processors-store"; -import { TAG_NAME_MAP } from "../../../custom-elements/mod"; +import { TAG_NAME_MAP } from "../../mod"; import { formatHTML } from "../../../utils/html-formatting"; export type CurrentOutput = diff --git a/website/src/pages/SyntaxReference/RotextExample/input-parts/mod.tsx b/website/src/custom-elements/domestic-internal/rotext-example/input-parts/mod.tsx similarity index 100% rename from website/src/pages/SyntaxReference/RotextExample/input-parts/mod.tsx rename to website/src/custom-elements/domestic-internal/rotext-example/input-parts/mod.tsx diff --git a/website/src/pages/SyntaxReference/RotextExample/mod.tsx b/website/src/custom-elements/domestic-internal/rotext-example/mod.tsx similarity index 99% rename from website/src/pages/SyntaxReference/RotextExample/mod.tsx rename to website/src/custom-elements/domestic-internal/rotext-example/mod.tsx index cb3ff0e3..62a5a4c7 100644 --- a/website/src/pages/SyntaxReference/RotextExample/mod.tsx +++ b/website/src/custom-elements/domestic-internal/rotext-example/mod.tsx @@ -3,6 +3,7 @@ import { customElement, getCurrentElement, noShadowDOM } from "solid-element"; import * as Ankor from "ankor"; +import { findClosestElementEx } from "@rolludejo/internal-web-shared/dom"; import { ShadowRootAttacher } from "@rolludejo/internal-web-shared/shadow-root"; import { styleProvider as styleProviderForPreflight } from "../../../styles/preflight"; @@ -13,7 +14,6 @@ import { styleProvider as styleProviderForTuanProse } from "../../../styles/tuan import { createRotextExampleStore } from "./create-store"; import { MainCard } from "./MainCard"; -import { findClosestElementEx } from "@rolludejo/internal-web-shared"; export function registerCustomElement(tag: string) { customElement( diff --git a/website/src/pages/SyntaxReference/RotextExample/output-parts/Preview.tsx b/website/src/custom-elements/domestic-internal/rotext-example/output-parts/Preview.tsx similarity index 93% rename from website/src/pages/SyntaxReference/RotextExample/output-parts/Preview.tsx rename to website/src/custom-elements/domestic-internal/rotext-example/output-parts/Preview.tsx index d2c986da..734bfd94 100644 --- a/website/src/pages/SyntaxReference/RotextExample/output-parts/Preview.tsx +++ b/website/src/custom-elements/domestic-internal/rotext-example/output-parts/Preview.tsx @@ -12,15 +12,10 @@ import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"; import * as Ankor from "ankor"; -import { - PROSE_CLASS, - registerCustomElementsOnce, -} from "../../../../custom-elements/mod"; +import { PROSE_CLASS } from "../../../mod"; export type PreviewContent = ["html", string]; -registerCustomElementsOnce(); - export const Preview: Component<{ content: () => PreviewContent; }> = (props) => { diff --git a/website/src/pages/SyntaxReference/RotextExample/output-parts/mod.tsx b/website/src/custom-elements/domestic-internal/rotext-example/output-parts/mod.tsx similarity index 100% rename from website/src/pages/SyntaxReference/RotextExample/output-parts/mod.tsx rename to website/src/custom-elements/domestic-internal/rotext-example/output-parts/mod.tsx diff --git a/website/src/custom-elements/internal-link/preview.tsx b/website/src/custom-elements/internal-link/preview.tsx index 597cc684..ead99155 100644 --- a/website/src/custom-elements/internal-link/preview.tsx +++ b/website/src/custom-elements/internal-link/preview.tsx @@ -1,4 +1,10 @@ -import { createEffect, createMemo } from "solid-js"; +import { + createEffect, + createMemo, + createResource, + on, + onMount, +} from "solid-js"; import { render } from "solid-js/web"; import * as Ankor from "ankor"; @@ -14,8 +20,11 @@ import { AnkorWidgetNavigationInnerRenderer } from "@rotext/solid-components/int import { createSignalGetterFromWatchable } from "../hooks"; import { styleProvider as styleProviderForPreflight } from "../../styles/preflight"; +import { styleProvider as styleProviderForTailwind } from "../../styles/tailwind"; + import { closestScrollContainer } from "../../utils/mod"; import Global from "../../global"; +import { syntaxReferenceResourceManager } from "../../resource-managers/syntax-reference"; export function createDemoPreviewRenderer( createRendererOpts: { proseClass: string; proseStyleProvider: StyleProvider }, @@ -40,11 +49,40 @@ export function createDemoPreviewRenderer( ); const address = createMemo(() => parseAddress(rawAddr())); + let contentContainerEl!: HTMLDivElement; + + const [pageHTMLRaw] = createResource(() => { + const page = address().page; + if (!page) return null; + return syntaxReferenceResourceManager.getPage(page); + }); + onMount(() => { + createEffect(on([pageHTMLRaw], ([pageHTMLRaw]) => { + if (!pageHTMLRaw) { + contentContainerEl.innerHTML = "TODO"; + } else { + contentContainerEl.innerHTML = pageHTMLRaw; + } + })); + }); + return ( - {`TODO: ${rawAddr()}`} +
+
+
+
+
+
); }, el); @@ -58,7 +96,7 @@ export function createDemoPreviewRenderer( // 类其他属性里。 // 对于导航类挂件(如本挂件及引用链接):在最外层有多个 widget owner 时 // (比如在一个串中),应当额外考虑目标地址是否已经处于页面当中(已经加载)。 - const currentPage = window.location.pathname.split("/").at(-1); + const currentPage = Global.currentPageName!; const { page, section } = parseAddress(rawAddrW.currentValue); diff --git a/website/src/custom-elements/mod.ts b/website/src/custom-elements/mod.ts index 650a0bfc..04a888ed 100644 --- a/website/src/custom-elements/mod.ts +++ b/website/src/custom-elements/mod.ts @@ -9,6 +9,8 @@ import { registerCustomElement as registerCustomElementForScratchOff } from "./d import { registerCustomElement as registerCustomElementForCollapse } from "./domestic/Collapse"; import { registerCustomElement as registerCustomElementForCodeBlock } from "./domestic/CodeBlock"; +import { registerCustomElement as registerCustomElementForRotextPreview } from "./domestic-internal/rotext-example/mod"; + let hasRegistered = false; export function registerCustomElementsOnce() { @@ -21,4 +23,6 @@ export function registerCustomElementsOnce() { registerCustomElementForScratchOff(TAG_NAME_MAP["scratch-off"]); registerCustomElementForCollapse(TAG_NAME_MAP["collapse"]); registerCustomElementForCodeBlock(TAG_NAME_MAP["code-block"]); + + registerCustomElementForRotextPreview("x-rotext-example"); } diff --git a/website/src/global.ts b/website/src/global.ts index 4bc3a7ff..89e70833 100644 --- a/website/src/global.ts +++ b/website/src/global.ts @@ -1,6 +1,7 @@ import type { Navigator } from "@solidjs/router"; const stuff: { + currentPageName?: string | null; navigator?: Navigator; } = {}; @@ -9,3 +10,7 @@ export default stuff; export function initializeGlobal(initialStuff: Required) { Object.assign(stuff, initialStuff); } + +export function updateGlobalCurrentPageName(name: string | null) { + stuff.currentPageName = name; +} diff --git a/website/src/index.tsx b/website/src/index.tsx index bcebb6c2..cce5deb5 100644 --- a/website/src/index.tsx +++ b/website/src/index.tsx @@ -4,6 +4,7 @@ import { render } from "solid-js/web"; import { RotextProcessorName } from "./hooks/rotext-processors-store"; import { RotextProcessorsStoreProvider } from "./contexts/rotext-processors-store"; +import { registerCustomElementsOnce } from "./custom-elements/mod"; import { Root } from "./components/layout"; @@ -19,6 +20,8 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) { ); } +registerCustomElementsOnce(); + render(() => { return ( { - initializeGlobal({ navigator: useNavigate() }); + initializeGlobal({ currentPageName: null, navigator: useNavigate() }); return (
diff --git a/website/src/pages/Playground/preview-parts/Preview/mod.tsx b/website/src/pages/Playground/preview-parts/Preview/mod.tsx index 1eac7221..f85ca525 100644 --- a/website/src/pages/Playground/preview-parts/Preview/mod.tsx +++ b/website/src/pages/Playground/preview-parts/Preview/mod.tsx @@ -16,10 +16,7 @@ import * as Ankor from "ankor"; import { ErrorAlert } from "@rotext/solid-components/internal"; import { debounceEventHandler } from "../../../../utils/mod"; -import { - PROSE_CLASS, - registerCustomElementsOnce, -} from "../../../../custom-elements/mod"; +import { PROSE_CLASS } from "../../../../custom-elements/mod"; import { ActiveLines, EditorStore, TopLine } from "../../editor-store"; import { createAutoResetCounter } from "../../../../hooks/auto-reset-counter"; @@ -28,8 +25,6 @@ import { RotextProcessResult } from "../../../../processors/mod"; import { LookupList, LookupListRaw } from "./internal-types"; import * as ScrollUtils from "./scroll-utils"; -registerCustomElementsOnce(); - const CONTENT_ROOT_CLASS = "previewer-content-root"; const Preview: Component< diff --git a/website/src/pages/SyntaxReference/mod.tsx b/website/src/pages/SyntaxReference/mod.tsx index 597105c7..28e30ffd 100644 --- a/website/src/pages/SyntaxReference/mod.tsx +++ b/website/src/pages/SyntaxReference/mod.tsx @@ -16,15 +16,9 @@ import { Button, Card, Loading } from "../../components/ui/mod"; import "../../styles/tuan-prose"; import { syntaxReferenceResourceManager } from "../../resource-managers/syntax-reference"; import { getSyntaxReferencePathOfHeading } from "../../utils/syntax-reference"; -import { initializeGlobal } from "../../global"; - -import { registerCustomElement as registerCustomElementForRotextPreview } from "./RotextExample/mod"; - -registerCustomElementForRotextPreview("x-rotext-example"); +import { initializeGlobal, updateGlobalCurrentPageName } from "../../global"; export default (() => { - initializeGlobal({ navigator: useNavigate() }); - let contentContainerEl!: HTMLDivElement; const params = useParams(); @@ -32,6 +26,11 @@ export default (() => { const navigate = useNavigate(); const location = useLocation(); + initializeGlobal({ currentPageName: null, navigator: navigate }); + createEffect(on([pageName], ([pageName]) => { + updateGlobalCurrentPageName(pageName); + })); + const [isIndexLoaded, setIsIndexLoaded] = createSignal(false); const [pageHTMLRaw] = createResource( @@ -167,11 +166,13 @@ export default (() => { )}
-
-
+
+
+
+
+