diff --git a/src/app.tsx b/src/app.tsx index d1359c8..435b7a7 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -9,9 +9,6 @@ export default function App() { ( - SolidStart - Basic - Index - About {props.children} )} diff --git a/src/entry-client.tsx b/src/entry-client.tsx index 0ca4e3c..8e8e723 100644 --- a/src/entry-client.tsx +++ b/src/entry-client.tsx @@ -1,4 +1,4 @@ // @refresh reload import { mount, StartClient } from "@solidjs/start/client"; -mount(() => , document.getElementById("app")!); +mount(() => , document.body); diff --git a/src/entry-server.tsx b/src/entry-server.tsx index 401eff8..e7a6a25 100644 --- a/src/entry-server.tsx +++ b/src/entry-server.tsx @@ -12,7 +12,7 @@ export default createHandler(() => ( {assets} -
{children}
+ {children} {scripts} diff --git a/src/features/file/index.tsx b/src/features/file/index.tsx new file mode 100644 index 0000000..50a54ea --- /dev/null +++ b/src/features/file/index.tsx @@ -0,0 +1,13 @@ +import { createContext, useContext } from "solid-js"; + +const FilesContext = createContext(); + +export const FilesProvider = (props) => { + return {props.children}; +} + +export const useFiles = () => useContext(FilesContext); + +export const open = () => { + +}; \ No newline at end of file diff --git a/src/features/menu/index.tsx b/src/features/menu/index.tsx new file mode 100644 index 0000000..66fb4a2 --- /dev/null +++ b/src/features/menu/index.tsx @@ -0,0 +1,113 @@ +import { Component, JSX, ParentComponent, children, createContext, createRenderEffect, createUniqueId, mergeProps, onCleanup, useContext } from "solid-js"; +import { isServer, ssr, useAssets } from "solid-js/web"; + +export interface MenuContextType { + add(item: Item): number; + remove(index: number): void; +}; + +export interface Item { + ref?: Element; + id: string; + label: string; + children?: Omit[]; +} + +const MenuContext = createContext(); + +const initClientProvider = () => { + console.log(document.querySelector('[data-app-menu="root"]')); + console.log(document.querySelector('[data-app-menu="ssr-items"]')); + + return { + add(item: Item) { + return -1; + }, + remove(index: number) {}, + }; +}; + +const initServerProvider = () => { + const items: Item[] = []; + + useAssets(() => ssr(`
${JSON.stringify(items)}
`) as any); + + return { + add(item: Item) { + return items.push(item); + }, + remove(index: number) {}, + }; +}; + +export const MenuProvider: ParentComponent = (props) => { + const ctx = isServer ? initServerProvider() : initClientProvider(); + + return {props.children}; +} + +const useMenu = () => { + const context = useContext(MenuContext); + + if(context === undefined) { + throw new Error(' is called outside of a '); + } + + return context; +} + +export const MenuItem: ParentComponent<{ label: string }> = (props) => { + const childItems = children(() => props.children); + + return mergeProps(props, { + get children() { + return childItems(); + } + }) as unknown as JSX.Element; +} + +export const Menu: ParentComponent<{}> = (props) => { + const menu = useMenu(); + const items: { label: string, children?: { label: string }[] }[] = (isServer + ? props.children + : props.children?.map(c => c())) ?? []; + + createRenderEffect(() => { + const indices = items.map(({ label, children }) => + menu.add({ + id: createUniqueId(), + label, + children: children?.map(({ label }) => ({ id: createUniqueId(), label })) + }) + ); + + onCleanup(() => { + for(const index of indices){ + menu.remove(index); + } + }); + }); + + return null; +}; + +export const MenuRoot: Component = () => { + const menu = useMenu(); + + return
+ + // return + // {(item) => <> + // + + // + //
+ // + // {(child) => {child.label}} + // + //
+ // + // + // } + // ; +}; \ No newline at end of file diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx new file mode 100644 index 0000000..f493b92 --- /dev/null +++ b/src/routes/(editor).tsx @@ -0,0 +1,21 @@ +import { Title } from "@solidjs/meta"; +import { FilesProvider } from "~/features/file"; +import { MenuRoot, MenuProvider } from "~/features/menu"; + + +export default function Editor(props) { + return + + +
+ + {props.children} + +
+ +} \ No newline at end of file diff --git a/src/routes/[...404].tsx b/src/routes/(editor)/[...404].tsx similarity index 94% rename from src/routes/[...404].tsx rename to src/routes/(editor)/[...404].tsx index 4ea71ec..56661d9 100644 --- a/src/routes/[...404].tsx +++ b/src/routes/(editor)/[...404].tsx @@ -3,7 +3,7 @@ import { HttpStatusCode } from "@solidjs/start"; export default function NotFound() { return ( -
+ <> Not Found

Page Not Found

@@ -14,6 +14,6 @@ export default function NotFound() { {" "} to learn how to build SolidStart apps.

-
+ ); } diff --git a/src/routes/about.tsx b/src/routes/(editor)/about.tsx similarity index 100% rename from src/routes/about.tsx rename to src/routes/(editor)/about.tsx diff --git a/src/routes/(editor)/index.tsx b/src/routes/(editor)/index.tsx new file mode 100644 index 0000000..d0e3b22 --- /dev/null +++ b/src/routes/(editor)/index.tsx @@ -0,0 +1,21 @@ +import { Menu, MenuItem } from "~/features/menu"; + +export default function Index() { + return ( + <> + + + + + + + + + + + + + + + ); +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx deleted file mode 100644 index 5d557d8..0000000 --- a/src/routes/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Title } from "@solidjs/meta"; -import Counter from "~/components/Counter"; - -export default function Home() { - return ( -
- Hello World -

Hello world!

- -

- Visit{" "} - - start.solidjs.com - {" "} - to learn how to build SolidStart apps. -

-
- ); -}