From f9f74b155c4bc35bb6192e95a0b226fd431d550d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:40:07 +0000 Subject: [PATCH 01/25] Add renovate.json --- renovate.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 renovate.json diff --git a/renovate.json b/renovate.json new file mode 100644 index 0000000..5db72dd --- /dev/null +++ b/renovate.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://docs.renovatebot.com/renovate-schema.json", + "extends": [ + "config:recommended" + ] +} -- 2.50.1 From 2ec83e2ccb08053e3c916d32fd51a1aeae82259a Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Tue, 24 Sep 2024 16:55:36 +0200 Subject: [PATCH 02/25] initial setup --- src/app.tsx | 3 - src/entry-client.tsx | 2 +- src/entry-server.tsx | 2 +- src/features/file/index.tsx | 13 +++ src/features/menu/index.tsx | 113 +++++++++++++++++++++++++ src/routes/(editor).tsx | 21 +++++ src/routes/{ => (editor)}/[...404].tsx | 4 +- src/routes/{ => (editor)}/about.tsx | 0 src/routes/(editor)/index.tsx | 21 +++++ src/routes/index.tsx | 19 ----- 10 files changed, 172 insertions(+), 26 deletions(-) create mode 100644 src/features/file/index.tsx create mode 100644 src/features/menu/index.tsx create mode 100644 src/routes/(editor).tsx rename src/routes/{ => (editor)}/[...404].tsx (94%) rename src/routes/{ => (editor)}/about.tsx (100%) create mode 100644 src/routes/(editor)/index.tsx delete mode 100644 src/routes/index.tsx 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. -

-
- ); -} -- 2.50.1 From 4b3d91d6cd4855717ea61b170aba9dc09fc8f466 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Thu, 26 Sep 2024 15:47:19 +0200 Subject: [PATCH 03/25] portal is the answer I was looking for --- src/features/menu/index.tsx | 121 ++++++++++++++++------------------ src/routes/(editor).tsx | 15 +++-- src/routes/(editor)/index.tsx | 20 +++--- 3 files changed, 76 insertions(+), 80 deletions(-) diff --git a/src/features/menu/index.tsx b/src/features/menu/index.tsx index 66fb4a2..a8759ee 100644 --- a/src/features/menu/index.tsx +++ b/src/features/menu/index.tsx @@ -1,9 +1,9 @@ -import { Component, JSX, ParentComponent, children, createContext, createRenderEffect, createUniqueId, mergeProps, onCleanup, useContext } from "solid-js"; -import { isServer, ssr, useAssets } from "solid-js/web"; +import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createRenderEffect, createSignal, createUniqueId, mergeProps, onCleanup, useContext } from "solid-js"; +import { Portal, isServer, ssr, useAssets } from "solid-js/web"; export interface MenuContextType { - add(item: Item): number; - remove(index: number): void; + ref(): JSX.Element|undefined; + // setRef(ref: JSX.Element|undefined): void; }; export interface Item { @@ -15,35 +15,48 @@ export interface Item { const MenuContext = createContext(); -const initClientProvider = () => { - console.log(document.querySelector('[data-app-menu="root"]')); - console.log(document.querySelector('[data-app-menu="ssr-items"]')); +// const initClientProvider = (): MenuContextType => { +// const root = document.querySelector('[data-app-menu="root"]'); +// const items = JSON.parse(document.querySelector('[data-app-menu="ssr-items"]')?.textContent ?? '[]'); - return { - add(item: Item) { - return -1; - }, - remove(index: number) {}, - }; -}; +// console.log(items); -const initServerProvider = () => { - const items: Item[] = []; +// let _ref!: JSX.Element; - useAssets(() => ssr(`
${JSON.stringify(items)}
`) as any); +// // useAssets(() => ssr(``) as any); - return { - add(item: Item) { - return items.push(item); - }, - remove(index: number) {}, - }; -}; +// return { +// ref() { +// return _ref; +// }, +// setRef(ref: JSX.Element) { +// _ref = ref; +// }, +// }; +// }; -export const MenuProvider: ParentComponent = (props) => { - const ctx = isServer ? initServerProvider() : initClientProvider(); +// const initServerProvider = (): MenuContextType => { +// let _ref!: JSX.Element; - return {props.children}; +// // useAssets(() => ssr(``) as any); + +// return { +// ref() { +// return _ref; +// }, +// setRef(ref: JSX.Element) { +// _ref = ref; +// }, +// }; +// }; + +export const MenuProvider: ParentComponent<{ root?: JSX.Element }> = (props) => { + // const ctx = isServer ? initServerProvider() : initClientProvider(); + + // const [ ref, setRef ] = createSignal(); + // const ctx = {ref, setRef}; + + return props.root }}>{props.children}; } const useMenu = () => { @@ -56,7 +69,7 @@ const useMenu = () => { return context; } -export const MenuItem: ParentComponent<{ label: string }> = (props) => { +const Item: ParentComponent<{ label: string }> = (props) => { const childItems = children(() => props.children); return mergeProps(props, { @@ -66,48 +79,28 @@ export const MenuItem: ParentComponent<{ label: string }> = (props) => { }) as unknown as JSX.Element; } -export const Menu: ParentComponent<{}> = (props) => { +const Root: 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 })) - }) - ); + return + + {(item) => <> + - onCleanup(() => { - for(const index of indices){ - menu.remove(index); + +
+ + {(child) => {child.label}} + +
+ + } - }); - }); - - return null; + + }; -export const MenuRoot: Component = () => { - const menu = useMenu(); - - return
- - // return - // {(item) => <> - // - - // - //
- // - // {(child) => {child.label}} - // - //
- // - // - // } - // ; -}; \ No newline at end of file +export const Menu = { Root, Item } as const; \ No newline at end of file diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index f493b92..f59f1ed 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -1,17 +1,20 @@ import { Title } from "@solidjs/meta"; +import { JSX, createSignal } from "solid-js"; import { FilesProvider } from "~/features/file"; -import { MenuRoot, MenuProvider } from "~/features/menu"; +import { MenuProvider, Menu } from "~/features/menu"; export default function Editor(props) { - return -