@fullstackunicorn/create-root 1.0.16 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/preloader/@use.js

@@ -0,0 +1,14 @@
+import { useLoadMainMenu } from "#@/menus/Main.use.js"
+
+export const useLoadAtoms = (lang) => {
+
+    const loadMainMenu = useLoadMainMenu(lang)
+
+    const loadAtoms = (data) => {
+
+        loadMainMenu(data)
+
+    }
+
+    return loadAtoms
+}

package/assets/root.fullstackunicorn.dev/frontend/preloader/Preloader.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react'
+import { uri } from '#@/App.uri.js'
+import { api } from '#@/client/@api.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { preload } from '#@/root/preload.js'
+import { useLoadAtoms } from '#@/preloader/@use.js'
+
+const Preload = ({ setIsPreloaded }) => {
+
+    const { lang } = useUrl()
+    const loadAtoms = useLoadAtoms(lang)
+
+    useEffect(() => { 
+
+        let alive = true
+
+        const runPreload = async () => {
+
+            const payload = Object.entries(preload.get(lang)).map(([name, data]) => {
+                return api.load.post(F3.fabUrl(uri.load, { name }), data)
+            })
+
+            const results = await Promise.all(payload)
+            loadAtoms(results)
+
+            const isPreloaded = results.every(Boolean)
+
+            if (!alive) return
+            if (isPreloaded) setIsPreloaded(true)
+        }
+
+        runPreload()
+
+        return () => { alive = false }
+
+    }, [lang, setIsPreloaded])
+
+    return null
+}
+
+export const Preloader = () => {
+    const [isPreloaded, setIsPreloaded] = useState(false)
+    // return null
+    if (isPreloaded) return null
+    else return <Preload setIsPreloaded={setIsPreloaded} />
+}

package/assets/root.fullstackunicorn.dev/frontend/root/constants.js

@@ -0,0 +1,4 @@
+import { root } from '#@/root/constants.root.js'
+import { scope } from '#@/root/constants.scope.js'
+
+export const constants = { ...scope, ...root }

package/assets/root.fullstackunicorn.dev/frontend/root/constants.root.js

@@ -0,0 +1,15 @@
+import logo from '#@/configure/logo.json'
+import trademark from '#@/configure/trademark.json'
+import cache from '#@/configure/cache.json'
+import layout from '#@/configure/layout.json'
+import services from '#@/configure/services.json'
+import env from '#@/configure/env.json'
+
+export const root = {
+    env,
+    logo,
+    trademark,
+    services,
+    layout,
+    cache
+}

package/assets/root.fullstackunicorn.dev/frontend/root/constants.scope.js

@@ -0,0 +1,5 @@
+// import custom from '#@/path..'
+
+export const scope = {
+    // custom
+}

package/assets/root.fullstackunicorn.dev/frontend/root/errors.js

@@ -0,0 +1,4 @@
+import { root } from '#@/root/errors.root.js'
+import { scope } from '#@/root/errors.scope.js'
+
+export const errors = { ...scope, ...root }

package/assets/root.fullstackunicorn.dev/frontend/root/errors.root.js

@@ -0,0 +1,6 @@
+import { ErrorPage } from '#@/panels/error/ErrorPage'
+
+const root = {}
+root.error = <ErrorPage/>
+
+export { root }

package/assets/root.fullstackunicorn.dev/frontend/root/errors.scope.js

@@ -0,0 +1,6 @@
+// import { Custom } from '#@/path...'
+
+const scope = {}
+// scope.custom = <Custom/>
+
+export { scope }

package/assets/root.fullstackunicorn.dev/frontend/root/menus.js

@@ -0,0 +1,9 @@
+import { root } from '#@/root/menus.root.js'
+import { scope } from '#@/root/menus.scope.js'
+
+const menu = { ...scope, ...root }
+
+const menus = {}
+menus.one = (url,userId) => null
+menus.two = (url,userId) => menu.main()
+export { menus }

package/assets/root.fullstackunicorn.dev/frontend/root/menus.root.js

@@ -0,0 +1,6 @@
+import { Main } from '#@/menus/Main.js'
+
+const root = { }
+root.main = () => <Main isTwo/>
+
+export { root }

package/assets/root.fullstackunicorn.dev/frontend/root/menus.scope.js

@@ -0,0 +1,6 @@
+// import { Custom } from '#@/path..'
+
+const scope = {}
+// root.custom = () => <Custom/>
+
+export { scope }

package/assets/root.fullstackunicorn.dev/frontend/root/modals.js

@@ -0,0 +1,4 @@
+import { root } from '#@/root/modals.root.js'
+import { scope } from '#@/root/modals.scope.js'
+
+export const modals = {...scope, ...root}

package/assets/root.fullstackunicorn.dev/frontend/root/modals.root.js

@@ -0,0 +1,11 @@
+import { selects } from '#@/panels/selectors/select/SelectModal'
+import { popup } from '#@/panels/selectors/popup/PopupModal'
+import { sliders } from '#@/panels/sliders/slider/SliderModal'
+
+export const root = {
+
+    selects,
+    popup,
+    sliders
+    
+} 

package/assets/root.fullstackunicorn.dev/frontend/root/modals.scope.js

@@ -0,0 +1,5 @@
+// import { custom } from '#@/path..'
+
+export const scope = {
+    // custom
+} 

package/assets/root.fullstackunicorn.dev/frontend/root/pages.js

@@ -0,0 +1,4 @@
+import { root } from '#@/root/pages.root.js'
+import { scope } from '#@/root/pages.scope.js'
+
+export const pages = {...scope, ...root}

package/assets/root.fullstackunicorn.dev/frontend/root/pages.root.js

@@ -0,0 +1,12 @@
+import { Callout } from '#@/pages/root/Callout.js'
+import { Legals } from '#@/pages/root/Legals.js'
+import { Legal } from '#@/pages/root/Legal.js'
+import { User } from '#@/pages/root/User.js'
+
+const root = {}
+root.callout = <Callout/>
+root.legals = <Legals/>
+root.legal = <Legal/>
+root.user = <User/>
+
+export { root }

package/assets/root.fullstackunicorn.dev/frontend/root/pages.scope.js

@@ -0,0 +1,11 @@
+import { Home } from '#@/pages/app/Home.js'
+import { Checkout } from '#@/pages/app/Checkout.js'
+
+const scope = {}
+
+scope.home = <Home/>
+
+scope.checkoutSuccess = <Checkout/>
+scope.checkoutCancel = <Checkout isCancel/>
+
+export { scope }

package/assets/root.fullstackunicorn.dev/frontend/root/preload.js

@@ -0,0 +1,18 @@
+import { root } from '#@/root/preload.root.js'
+import { scope } from '#@/root/preload.scope.js'
+
+class Preload {
+
+    get = lang => {
+
+        const result = {}
+
+        result.scope = scope.get(lang)
+        result.root = root.get(lang)
+
+        return result
+    }
+
+}
+
+export const preload = new Preload()

package/assets/root.fullstackunicorn.dev/frontend/root/preload.root.js

@@ -0,0 +1,30 @@
+import { uri } from '#@/App.uri.js'
+
+class Root {
+
+    items = lang => [
+        F3.fabUrl(uri.data.root.verbal, { path: 'user', lang }),
+        F3.fabUrl(uri.data.legals.verbal, { path: 'legals', lang }),
+        F3.fabUrl(uri.data.lookups.verbal, { path: 'cookies', lang }),
+        F3.fabUrl(uri.data.lookups.verbal, { path: 'languages', lang }),
+        F3.fabUrl(uri.data.lookups.verbal, { path: 'alphabets', lang }),
+        F3.fabUrl(uri.data.lookups.verbal, { path: 'countries', lang }),
+        F3.fabUrl(uri.data.lookups.logic, { path: 'countries' })
+    ]
+
+    lists = lang => ({
+        item: F3.fabUrl(uri.data.legals.verbal, { lang }),
+        lists: [
+            F3.fabUrl(uri.data.legals.logic, { path: 'legals' })
+        ]
+    })
+
+    get = lang => {
+        const result = {}
+        result.items = this.items(lang)
+        result.lists = [this.lists(lang)]
+        return result
+    }
+}
+
+export const root = new Root()

package/assets/root.fullstackunicorn.dev/frontend/root/preload.scope.js

@@ -0,0 +1,33 @@
+import { uri } from '#@/App.uri.js'
+
+class Scope {
+
+    items = lang => [
+        F3.fabUrl(uri.data.content.verbal, { lang, path: 'home' }),
+        F3.fabUrl(uri.data.content.verbal, { lang, path: 'home' }),
+        // menu.main
+        F3.fabUrl(uri.data.menus.verbal, { lang, path: 'main' }),
+        F3.fabUrl(uri.data.menus.logic, { lang, path: 'main' })
+    ]
+
+    visuals = () => [
+        F3.fabUrl(uri.data.lookups.visual, { path: 'countries' })
+    ]
+
+    // lists = lang => ({
+    //     item: F3.fabUrl(uri.data.content.verbal, { lang }),
+    //     lists: [
+    //         F3.fabUrl(uri.data.content.logic, { path: 'custom' }),
+    //     ]
+    // })
+
+    get = lang => {
+        const result = {}
+        result.items = [...this.items(lang), ...this.visuals()]
+        return result
+    }
+
+
+}
+
+export const scope = new Scope()

package/assets/root.fullstackunicorn.dev/frontend/root/routes.js

@@ -0,0 +1,7 @@
+import { root } from '#@/root/routes.root.js'
+import { scope } from '#@/root/routes.scope.js'
+
+const routes = {}
+routes.public = { ...scope.public, ...root.public }
+routes.private = { ...scope.private, ...root.private }
+export { routes }

package/assets/root.fullstackunicorn.dev/frontend/root/routes.root.js

@@ -0,0 +1,47 @@
+const root = {}
+
+root.private = {}
+
+root.public = {}
+
+root.public.user = {}
+root.public.user.id = "user"
+root.public.user.path = "/:lang/user"
+root.public.user.render = "user"
+root.public.user.parent = []
+root.public.user.isMenu = false
+root.public.user.isRoute = true
+
+root.public.legals = {}
+root.public.legals.id = "legals"
+root.public.legals.path = "/:lang/legals"
+root.public.legals.render = "legals"
+root.public.legals.parent = []
+root.public.legals.isMenu = false
+root.public.legals.isRoute = true
+
+root.public.legal = {}
+root.public.legal.id = "legal"
+root.public.legal.path = "/:lang/legal/:slug"
+root.public.legal.render = "legal"
+root.public.legal.parent = [
+    "/:lang/legals"
+]
+root.public.legal.isMenu = false
+root.public.legal.isRoute = true
+
+root.public.callout = {}
+root.public.callout.id = "callout"
+root.public.callout.path = "/:lang/callout"
+root.public.callout.render = "callout"
+root.public.callout.parent = []
+root.public.callout.isRoute = true
+
+root.public.errors = {}
+root.public.errors.id = "errors"
+root.public.errors.path = "/:lang/errors/:item"
+root.public.errors.render = "errors"
+root.public.errors.parent = []
+root.public.errors.isRoute = true
+
+export { root }

package/assets/root.fullstackunicorn.dev/frontend/root/routes.scope.js

@@ -0,0 +1,31 @@
+const scope = {}
+
+scope.private = {}
+
+scope.public = {}
+
+scope.public.home = {}
+scope.public.home.id = "home"
+scope.public.home.path = "/:lang/home"
+scope.public.home.render = "home"
+scope.public.home.parent = []
+scope.public.home.isMenu = true
+scope.public.home.isRoute = true
+
+scope.public.checkoutSuccess = {}
+scope.public.checkoutSuccess.id = "checkoutSuccess"
+scope.public.checkoutSuccess.path = "/:lang/checkout/success"
+scope.public.checkoutSuccess.render = "checkoutSuccess"
+scope.public.checkoutSuccess.parent = []
+scope.public.checkoutSuccess.isMenu = false
+scope.public.checkoutSuccess.isRoute = true
+
+scope.public.checkoutCancel = {}
+scope.public.checkoutCancel.id = "checkoutCancel"
+scope.public.checkoutCancel.path = "/:lang/checkout/cancel"
+scope.public.checkoutCancel.render = "checkoutCancel"
+scope.public.checkoutCancel.parent = []
+scope.public.checkoutCancel.isMenu = false
+scope.public.checkoutCancel.isRoute = true
+
+export { scope }

package/assets/root.fullstackunicorn.dev/frontend/sworker/sw.js

@@ -0,0 +1,104 @@
+class Sworker {
+
+    constructor() {
+        this.cacheName = null
+        this.urlsToCache = ['/']
+    }
+
+    async deregister() { return await self.registration.unregister() }
+
+    async initVersion() {
+        try {
+            const resp = await fetch('/serviceworker.version.json', { cache: 'no-store' })
+            if (!resp.ok) throw new Error()
+            const data = await resp.json()
+            this.cacheName = `sworker-${data.version}`
+        } catch { this.cacheName = `sworker-legacy` }
+    }
+
+    async getManifestFiles(manifest) {
+        const entries = Object.values(manifest)
+        const valid = entries.filter(entry =>
+            entry &&
+            (entry.file?.endsWith('.css') ||
+                entry.file?.endsWith('.js') ||
+                entry.file?.endsWith('.ico'))
+        )
+        return valid.map(entry => `/${entry.file}`)
+    }
+
+    async initCacheList() {
+        const resp = await fetch('/manifest.json', { cache: 'no-store' })
+        if (!resp.ok) return
+        const manifest = await resp.json()
+        const files = await this.getManifestFiles(manifest)
+        this.urlsToCache = ['/', ...files]
+    }
+
+    async install(event) {
+        try {
+            await this.initVersion()
+            await this.initCacheList()
+
+            const cache = await caches.open(this.cacheName)
+            await cache.addAll(this.urlsToCache)
+
+            self.skipWaiting()
+        }
+        catch { await this.deregister() }
+    }
+
+    async activate(event) {
+        try {
+            await this.initVersion();
+            const all = await caches.keys();
+            const deletions = all.map(async name => {
+                if (name.startsWith('sworker-') && name !== this.cacheName) {
+                    await caches.delete(name);
+                }
+            })
+            await Promise.all(deletions)
+            self.clients.claim()
+        } catch { await this.deregister() }
+    }
+
+    // async fetch(event) {
+    //     const req = event.request
+    //     const ignore = req.method !== 'GET' || req.url.includes('keyval')
+    //     if (ignore) return
+    //     event.respondWith(
+    //         (async () => {
+    //             try { return await fetch(req) }
+    //             catch { return await caches.match(req) }
+    //         })()
+    //     )
+    // }
+
+    async fetch(event) {
+
+        const req = event.request
+
+        if (req.method !== 'GET') return
+        if (req.mode !== 'navigate') return
+
+        event.respondWith((async () => {
+            try { return await fetch(req) }
+            catch (e) {
+                const cached = await caches.match(req)
+                if (cached) return cached
+                const appShell = await caches.match('/index.html')
+                if (appShell) return appShell
+                return Response.error()
+            }
+        })())
+    }
+
+    init() {
+        self.addEventListener('install', e => e.waitUntil(this.install()))
+        self.addEventListener('activate', e => e.waitUntil(this.activate()))
+        self.addEventListener('fetch', e => this.fetch(e))
+    }
+}
+
+const sworker = new Sworker()
+sworker.init()

package/assets/root.fullstackunicorn.dev/frontend/templates/cards.js

@@ -0,0 +1,25 @@
+// keep this line for parsing useStyle() 
+export const getCards = (s, c, t) => {
+
+    const cards = {} // create a template for data from the cards
+
+    cards.squared = {}
+    cards.squared.link = []
+    cards.squared.box = [s.X, s.radius24, s.overflowXYh, c.base_WW]
+    cards.squared.pictureWrap = [s.X, s.padding8]
+    cards.squared.pictureBox = [s.X, s.ratio, s.overflowXYh, s.radius16]
+    cards.squared.picture = [s.cover]
+    cards.squared.content = [s.paddingX16, s.paddingY16, s.col]
+
+    cards.portrait = {}
+    cards.portrait.link = [s.Y]
+    cards.portrait.box = [s.X, s.Y, s.col, s.padding24, s.radius24, s.overflowXYh, s.border1, c.base_WW, c.line_NN_W600]
+    cards.portrait.pictureWrap = [s.X]
+    cards.portrait.pictureBox = [s.X, s.overflowXYh, s.radius16]
+    cards.portrait.picture = [s.X]
+    cards.portrait.content = [s.paddingT16, s.col, s.Yc] 
+    cards.portrait.title = []
+    cards.portrait.price = [s.marginT16]
+
+    return cards
+}

package/assets/root.fullstackunicorn.dev/frontend/templates/index.js

@@ -0,0 +1,11 @@
+// keep this line for parsing useStyle() 
+import { getPage } from '#@/templates/page.js'
+import { getRoot } from '#@/templates/root.js'
+import { getCards } from '#@/templates/cards.js'
+
+export const templates = (s, c, t) => {
+    t.page = getPage(s,c,t)
+    t.root = getRoot(s,c,t)
+    t.cards = getCards(s,c,t)
+    return t
+}

package/assets/root.fullstackunicorn.dev/frontend/templates/page.js

@@ -0,0 +1,16 @@
+// keep this line for parsing useStyle() 
+
+export const getPage = (s, c, t) => {
+
+    const page = {}
+
+    page.home = [s.col, s.XYc]
+    page.fluid = [s.col, s.XYc]
+    page.fixed = [s.col_cXsY, s.Yc, s.Xx, s.Xmax540, s.paddingX16]
+    page.fixedL = [s.col_cXsY, s.Yc, s.Xx, s.Xmax672, s.paddingX16]
+    page.fixedXL = [s.col_cXsY, s.Yc, s.Xx, s.Xmax960, s.paddingX16]
+    page.docs = [s.col_cXsY, s.Yc, s.Xx, s.Xmax540, s.paddingX16, s.marginT16]
+    page.card = [s.col_cX, s.Yc, s.paddingX16]
+
+    return page
+}

package/assets/root.fullstackunicorn.dev/frontend/templates/root.js

@@ -0,0 +1,32 @@
+// keep this line for parsing useStyle() 
+
+export const getRoot = (s, c, t) => {
+
+    const root = {}
+
+    // header
+    root.main = {}
+    root.main.title = [s.fs28, s.lh32, s.fw500, c.item_NN_B600]
+    root.main.description = [s.fs16, s.lh24, s.fw500, c.item_NN_B600]
+
+    // text button font
+    root.button = {}
+    root.button.text = [s.fs16, s.lh24, s.fw500]
+
+    // cards  
+    root.cards = {}
+    root.cards.text = {}
+    root.cards.text.title = [s.textS, s.fs16, s.lh24, s.fw700]
+    root.cards.text.description = [s.textS, s.fs16, s.lh20, s.fw400]
+    root.cards.text.label = [s.textS, s.fs16, s.lh24, s.fw600]
+    root.cards.box = [s.col, s.X]
+    root.cards.top = [s.col, s.paddingT16, s.paddingB8]
+    root.cards.title = [...root.cards.text.title, c.item_NN_B400]
+    root.cards.description = [...root.cards.text.description, c.item_NN_B400]
+    root.cards.pressable = [s.row_sXcY, s.Y48, s.radius8]
+    root.cards.icon = [s.X40, s.Y48, c.item_NN_B400]
+    root.cards.label = [...root.cards.text.label, s.row_sXcY, s.Xr, s.paddingS4, c.item_NN_B400]
+    root.cards.slider = [s.X40, s.Y48, s.marginX8]
+
+    return root
+}

package/assets/root.fullstackunicorn.dev/frontend/tracking/errors.js

@@ -0,0 +1,5 @@
+export const errors = {
+
+    init: () => F3.logs('tracking.errors.init')
+    
+}

package/assets/root.fullstackunicorn.dev/frontend/tracking/logging.js

@@ -0,0 +1,5 @@
+export const logging = {
+
+    init: () => F3.logs('tracking.logging.init')
+    
+}

package/assets/root.fullstackunicorn.dev/frontend/tracking/performance.js

@@ -0,0 +1,5 @@
+export const performance = {
+
+    init: () => F3.logs('tracking.performance.init')
+    
+}

package/assets/root.fullstackunicorn.dev/frontend/tracking/vitals.js

@@ -0,0 +1,5 @@
+export const vitals = {
+
+    init: () => F3.logs('tracking.vitals.init')
+
+}

package/assets/root.fullstackunicorn.dev/frontend/vite.config.js

@@ -0,0 +1,64 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { jsxPlugin } from '#@/vite.jsx.js'
+import { sworkerPlugin } from '#@/vite.sworker.js'
+import { volumePlugin } from '#@/vite.volume.js'
+
+export default defineConfig(({ mode }) => {
+
+    const port = process.env.VITE_PORT
+
+    return {
+        plugins: [
+            react(),
+            jsxPlugin(),
+            sworkerPlugin(),
+            volumePlugin(mode),
+        ].filter(Boolean),
+
+        resolve: {
+            alias: {
+                "#@": `${process.cwd()}/`
+            },
+        },
+
+        publicDir: 'assets',
+
+        server: {
+            fs: { allow: ['..'] },
+            port: Number(port),
+            strictPort: true,
+            hmr: { port: Number(port) },
+            allowedHosts: ['.ngrok-free.app'],
+            proxy: {
+                '/api': {
+                    target: `http://localhost:${Number(port)+1}`,
+                    changeOrigin: true,
+                    secure: false,
+                },
+            }
+        },
+
+        build: {
+            assetsDir: '',
+            manifest: 'manifest.json',
+            assetsInclude: ['**/*.json', '**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.ico'],
+        },
+
+        optimizeDeps: {
+            rolldownOptions: {
+                moduleTypes: {
+                    '.js': 'jsx',
+                },
+            },
+        },
+
+        watch: {
+            usePolling: true,
+        },
+
+        define: {
+            'process.env': {}
+        }
+    }
+})

package/assets/root.fullstackunicorn.dev/frontend/vite.jsx.js

@@ -0,0 +1,10 @@
+import { transformWithOxc } from 'vite'
+
+export const jsxPlugin = () => ({
+    name: 'jsx-plugin',
+    enforce: 'pre',
+    async transform(code, id) {
+        if (!id.match(/.*\.js$/)) return null
+        return await transformWithOxc(code, id, { lang: 'jsx' })
+    },
+})