Bundle both config and views in one entrypoint in dev mode

alineacms · Nov 11, 2024 · 5dd2079 · 5dd2079
1 parent 62d1676
commit 5dd2079
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 23 deletions.
diff --git a/src/cli/generate/CopyStaticFiles.ts b/src/cli/generate/CopyStaticFiles.ts
@@ -23,7 +23,6 @@ export async function copyStaticFiles({outDir}: GenerateContext) {
     path.join(outDir, 'package.json'),
     JSON.stringify(packageJson, null, 2)
   )
-  await writeFileIfContentsDiffer(path.join(outDir, 'views.css'), ``)
   // await writeFileIfContentsDiffer(path.join(outDir, '.gitignore'), `*\n!.keep`)*/
   await writeFileIfContentsDiffer(
     path.join(outDir, '.keep'),

diff --git a/src/cli/serve/CreateLocalServer.ts b/src/cli/serve/CreateLocalServer.ts
@@ -92,8 +92,7 @@ export function createLocalServer(
   const matcher = router.matcher()
   const entryPoints = {
     entry: 'alinea/cli/static/dashboard/dev',
-    config: configLocation,
-    views: viewsPlugin.entry
+    config: '#alinea/entry'
   }
   const tsconfigLocation = path.join(rootDir, 'tsconfig.json')
   const tsconfig = fs.existsSync(tsconfigLocation)
@@ -118,7 +117,12 @@ export function createLocalServer(
     ...buildOptions,
     plugins,
     alias: {
-      'alinea/next': 'alinea/core'
+      'alinea/next': 'alinea/core',
+      '#alinea/config': configLocation,
+      '#alinea/entry': `data:text/javascript,
+        export * from '#alinea/config'
+        export * from '${viewsPlugin.entry}'
+      `
     },
     external: ['@alinea/generated'],
     inject: ['alinea/cli/util/WarnPublicEnv'],
@@ -217,7 +221,7 @@ export function createLocalServer(
           `<!DOCTYPE html>
           <meta charset="utf-8" />
           <link rel="icon" href="data:," />
-          <link href="/views.css" rel="stylesheet" />
+          <link href="/config.css" rel="stylesheet" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="handshake_url" value="${handlerUrl}?auth=handshake" />
           <meta name="redirect_url" value="${handlerUrl}?auth=login" />

diff --git a/src/cli/static/dashboard/dev.js b/src/cli/static/dashboard/dev.js
@@ -7,16 +7,10 @@ const element = scripts[scripts.length - 1]
 const into = document.createElement('div')
 into.id = 'root'
 element.parentElement.replaceChild(into, element)
-reactRender(jsx(DevDashboard, {loadConfig, loadViews}), into)
+reactRender(jsx(DevDashboard, {loadConfig}), into)
 
 async function loadConfig() {
   const exports = await import('/config.js?' + Math.random())
-  if ('cms' in exports) return exports.cms.config
-  throw new Error(`No config found in "/config.js"`)
-}
-
-async function loadViews() {
-  const exports = await import('/views.js?' + Math.random())
-  if ('views' in exports) return exports.views
-  throw new Error(`No views found in "/views.js"`)
+  if (!('cms' in exports)) throw new Error(`No config found in "/config.js"`)
+  return exports
 }
diff --git a/src/dashboard/dev/DevDashboard.tsx b/src/dashboard/dev/DevDashboard.tsx
@@ -1,5 +1,5 @@
 import {Client} from 'alinea/core/Client'
-import {Config} from 'alinea/core/Config'
+import {CMS} from 'alinea/core/CMS'
 import {useSetAtom} from 'jotai'
 import {ComponentType, useEffect, useState} from 'react'
 import {QueryClient} from 'react-query'
@@ -34,31 +34,30 @@ function setupDevReload({refresh, refetch, open, close}: DevReloadOptions) {
 }
 
 export type DevDashboardOptions = {
-  loadConfig: () => Promise<Config>
-  loadViews: () => Promise<Record<string, ComponentType>>
+  loadConfig: () => Promise<{cms: CMS; views: Record<string, ComponentType>}>
 }
 
 const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}})
 
-export function DevDashboard({loadConfig, loadViews}: DevDashboardOptions) {
+export function DevDashboard({loadConfig}: DevDashboardOptions) {
   const [app, setApp] = useState<AppProps>()
   const [connected, setConnected] = useState(true)
   const forceDbUpdate = useSetAtom(dbUpdateAtom)
   async function getConfig() {
     // Reload css
     const link = document.querySelector(
-      'link[href^="/views.css"]'
+      'link[href^="/config.css"]'
     ) as HTMLLinkElement
     const copy = link.cloneNode() as HTMLLinkElement
-    copy.href = '/views.css?' + Math.random()
+    copy.href = '/config.css?' + Math.random()
     copy.onload = () => link.remove()
     link.after(copy)
-    const [config, views] = await Promise.all([loadConfig(), loadViews()])
+    const config = await loadConfig()
     const client = new Client({
-      config,
+      config: config.cms,
       url: new URL('/api', location.href).href
     })
-    return setApp({config, views, client})
+    return setApp({config: config.cms.config, views: config.views, client})
   }
   useEffect(() => {
     getConfig()