chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

initial setup

Browse source
This commit is contained in:
Chris Kruining 2024-09-24 16:55:36 +02:00
parent 9e3f3cf46b
commit 2ec83e2ccb
10 changed files with 172 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app.tsx
View file

@ -9,9 +9,6 @@ export default function App() {
<Router <Router
root={props => ( root={props => (
<MetaProvider> <MetaProvider>
<Title>SolidStart - Basic</Title>
<a href="/">Index</a>
<a href="/about">About</a>
<Suspense>{props.children}</Suspense> <Suspense>{props.children}</Suspense>
</MetaProvider> </MetaProvider>
)} )}

2
src/entry-client.tsx
View file

@ -1,4 +1,4 @@
// @refresh reload // @refresh reload
import { mount, StartClient } from "@solidjs/start/client"; import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!); mount(() => <StartClient />, document.body);

2
src/entry-server.tsx
View file

@ -12,7 +12,7 @@ export default createHandler(() => (
{assets} {assets}
</head> </head>
<body> <body>
<div id="app">{children}</div> {children}
{scripts} {scripts}
</body> </body>
</html> </html>

13
src/features/file/index.tsx Normal file
View file

@ -0,0 +1,13 @@
import { createContext, useContext } from "solid-js";
const FilesContext = createContext();
export const FilesProvider = (props) => {
return <FilesContext.Provider value={undefined}>{props.children}</FilesContext.Provider>;
}
export const useFiles = () => useContext(FilesContext);
export const open = () => {
};

113
src/features/menu/index.tsx Normal file
View file

@ -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<Item, 'children'>[];
}
const MenuContext = createContext<MenuContextType>();
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(`<div data-app-menu="ssr-items">${JSON.stringify(items)}</div>`) as any);
return {
add(item: Item) {
return items.push(item);
},
remove(index: number) {},
};
};
export const MenuProvider: ParentComponent = (props) => {
const ctx = isServer ? initServerProvider() : initClientProvider();
return <MenuContext.Provider value={ctx}>{props.children}</MenuContext.Provider>;
}
const useMenu = () => {
const context = useContext(MenuContext);
if(context === undefined) {
throw new Error('<Menu /> is called outside of a <MenuProvider />');
}
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 <div data-app-menu="root"></div>
// return <For each={menu?.items()}>
// {(item) => <>
// <button {...(item.children ? { popovertarget: item.label } : {})}>{item.label}</button>
// <Show when={item.children}>
// <div id={item.label} popover>
// <For each={item.children}>
// {(child) => <span>{child.label}</span>}
// </For>
// </div>
// </Show>
// </>
// }
// </For>;
};

21
src/routes/(editor).tsx Normal file
View file

@ -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 <MenuProvider>
<nav>
<Title>Translation-Tool</Title>
<a href="/">Index</a>
<a href="/about">About</a>
<MenuRoot />
</nav>
<main>
<FilesProvider>
{props.children}
</FilesProvider>
</main>
</MenuProvider>
}

4
src/routes/[...404].tsx → src/routes/(editor)/[...404].tsx
View file

@ -3,7 +3,7 @@ import { HttpStatusCode } from "@solidjs/start";
export default function NotFound() { export default function NotFound() {
return ( return (
<main> <>
<Title>Not Found</Title> <Title>Not Found</Title>
<HttpStatusCode code={404} /> <HttpStatusCode code={404} />
<h1>Page Not Found</h1> <h1>Page Not Found</h1>
@ -14,6 +14,6 @@ export default function NotFound() {
</a>{" "} </a>{" "}
to learn how to build SolidStart apps. to learn how to build SolidStart apps.
</p> </p>
</main> </>
); );
} }

0
src/routes/about.tsx → src/routes/(editor)/about.tsx
View file

21
src/routes/(editor)/index.tsx Normal file
View file

@ -0,0 +1,21 @@
import { Menu, MenuItem } from "~/features/menu";
export default function Index() {
return (
<>
<Menu>
<MenuItem label="file">
<MenuItem label="open" />
<MenuItem label="save" />
</MenuItem>
<MenuItem label="edit" />
<MenuItem label="selection" />
<MenuItem label="view" />
</Menu>
</>
);
}

19
src/routes/index.tsx
View file

@ -1,19 +0,0 @@
import { Title } from "@solidjs/meta";
import Counter from "~/components/Counter";
export default function Home() {
return (
<main>
<Title>Hello World</Title>
<h1>Hello world!</h1>
<Counter />
<p>
Visit{" "}
<a href="https://start.solidjs.com" target="_blank">
start.solidjs.com
</a>{" "}
to learn how to build SolidStart apps.
</p>
</main>
);
}