npm - murasaki - Versions diffs - 0.1.0 → 0.2.0 - Mend

murasaki 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "murasaki",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The desktop framework for Next.js developers. Node-powered. WebView-thin. No Rust. No Chromium.",
   "keywords": [
     "desktop",

package/src/components/Link.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+// <Link href="/about">About</Link>
+//
+// Emits a plain <a> tagged with data-murasaki-link. The dev runner injects
+// a tiny script that intercepts clicks on these and switches the visible
+// route block in place — no full reload, no flash.
+import { jsx } from '../jsx/runtime.ts'
+import type { Child } from '../jsx/types.ts'
+export type LinkProps = {
+  href: string
+  children?: Child
+  className?: string
+  // Pass-through anchor props
+  [key: string]: unknown
+}
+export function Link({ href, children, ...rest }: LinkProps) {
+  return jsx('a', {
+    href: `#${href}`,
+    'data-murasaki-link': href,
+    ...rest,
+    children,
+  })
+}

package/src/env.ts CHANGED Viewed

@@ -6,9 +6,20 @@ import { fileURLToPath } from 'node:url'
 export const projectRoot = process.cwd()
 export const SRC_DIR = join(projectRoot, 'src')
-export const APP_PATH = join(SRC_DIR, 'app.tsx')
-export const LAYOUT_PATH = join(SRC_DIR, 'layout.tsx')
-export const GLOBALS_CSS = join(SRC_DIR, 'globals.css')
+// App-router convention (new, preferred):
+//   src/app/page.tsx       → "/"
+//   src/app/layout.tsx     → root layout (html/head/body)
+//   src/app/<sub>/page.tsx → "/<sub>"
+//   src/app/globals.css    → auto-injected
+export const APP_DIR = join(SRC_DIR, 'app')
+export const APP_GLOBALS_CSS = join(APP_DIR, 'globals.css')
+// Legacy single-page convention (still supported):
+//   src/app.tsx + src/layout.tsx + src/globals.css
+export const LEGACY_APP_PATH = join(SRC_DIR, 'app.tsx')
+export const LEGACY_LAYOUT_PATH = join(SRC_DIR, 'layout.tsx')
+export const LEGACY_GLOBALS_CSS = join(SRC_DIR, 'globals.css')
 const __dirname = dirname(fileURLToPath(import.meta.url))
 export const VERSION: string = (() => {

package/src/index.ts CHANGED Viewed

@@ -2,6 +2,10 @@
 //
 // Import like:
 //   import type { Metadata } from 'murasaki'
+//   import { Link }            from 'murasaki'
+export type { LinkProps } from './components/Link.tsx'
+export { Link } from './components/Link.tsx'
 export type Metadata = {
   /** Default <title> for the app (overridden by <title> tag inside <head>) */

package/src/jsx/index.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export {
   isValidElement,
   JSXNode,
   jsx,
+  raw,
   renderToString,
 } from './runtime.ts'

package/src/jsx/runtime.ts CHANGED Viewed

@@ -178,6 +178,26 @@ function renderAttrs(props: Props): string {
   return out
 }
+// ── Raw HTML escape hatch (pre-rendered HTML as a child) ─────────────
+class RawHtml {
+  readonly __isJSXNode = true as const
+  tag = '__raw__'
+  props: Props = {}
+  children: Child[] = []
+  html: string
+  constructor(html: string) {
+    this.html = html
+  }
+  toString(): string {
+    return this.html
+  }
+}
+/** Wrap pre-rendered HTML so it's emitted verbatim as a JSX child. */
+export function raw(html: string): JSXNodeLike {
+  return new RawHtml(html)
+}
 // ── Children rendering ───────────────────────────────────────────────
 function renderChild(c: Child): string {
   if (c == null || c === false || c === true) return ''

package/src/runtime/render.tsx CHANGED Viewed

@@ -1,19 +1,35 @@
-// Renders <Layout><App /></Layout> to an HTML string and injects
-// metadata (<title>, <meta description>) + src/globals.css.
+// Multi-route renderer.
 //
-// Uses murasaki/jsx (no React dependency).
-// The user's src/app.tsx / src/layout.tsx is transformed by tsx with
-// `jsxImportSource: "murasaki"` so their <div> calls into our jsx().
+// Pipeline:
+//   1. discover all src/app/<...>/page.tsx
+//   2. render each page wrapped in its nested layouts (NOT the root layout)
+//   3. render the root layout once with a switcher block as its children
+//   4. inject metadata (<title>, <meta description>) + globals.css into <head>
+//   5. inject a tiny navigation script that listens to hash changes and
+//      intercepts <Link> clicks
+//
+// Legacy single-page (src/app.tsx + src/layout.tsx) is still supported:
+// if src/app/ doesn't exist, we render the legacy convention.
-import { jsx, renderToString } from '../jsx/runtime.ts'
+import { existsSync, readFileSync } from 'node:fs'
+import { pathToFileURL } from 'node:url'
+import {
+  APP_DIR,
+  APP_GLOBALS_CSS,
+  LEGACY_APP_PATH,
+  LEGACY_GLOBALS_CSS,
+  LEGACY_LAYOUT_PATH,
+} from '../env.ts'
+import type { Metadata } from '../index.ts'
+import { jsx, raw, renderToString } from '../jsx/runtime.ts'
 import type { Child, Component } from '../jsx/types.ts'
 import type { RenderResult } from '../types.ts'
-import { loadApp, loadGlobalsCss, loadLayout } from './load.ts'
+import { discoverRoutes, type Route } from './routes.ts'
 const NO_APP_HTML =
   '<!doctype html><html><body style="font-family:system-ui;padding:40px;">' +
-  '<h1 style="color:#A855F7">src/app.tsx not found</h1>' +
-  '<p>Create one and the window will reload.</p></body></html>'
+  '<h1 style="color:#A855F7">No app found</h1>' +
+  '<p>Create <code>src/app/page.tsx</code> and the window will reload.</p></body></html>'
 function escapeHtml(s: string): string {
   return s
@@ -23,21 +39,119 @@ function escapeHtml(s: string): string {
     .replace(/"/g, '&quot;')
 }
-export async function renderApp(): Promise<RenderResult> {
-  const App = await loadApp()
-  if (!App) return { html: NO_APP_HTML }
+async function dynImport(path: string) {
+  const url = pathToFileURL(path).href + `?v=${Date.now()}`
+  return import(url)
+}
+type Loaded = {
+  default: Component
+  metadata?: Metadata
+}
+async function loadModule(path: string): Promise<Loaded | null> {
+  if (!existsSync(path)) return null
+  const mod = await dynImport(path)
+  if (!mod.default) return null
+  return mod
+}
+// ── Page rendering ──────────────────────────────────────────────────
+async function renderPageInner(route: Route, rootLayoutFile: string | null): Promise<string> {
+  const pageMod = await loadModule(route.pageFile)
+  if (!pageMod) return ''
+  let tree: Child = jsx(pageMod.default, null)
+  // Wrap in nested layouts, innermost first (i.e. skip root layout — it wraps everything later)
+  // route.layoutFiles: outermost first → so iterate from end backwards excluding root
+  const layoutsToApply = route.layoutFiles.filter((f) => f !== rootLayoutFile)
+  // Apply from innermost (last in array) outward (first in array) so the
+  // outer layout wraps the inner: <Outer><Inner><Page/></Inner></Outer>
+  for (let i = layoutsToApply.length - 1; i >= 0; i--) {
+    const layoutMod = await loadModule(layoutsToApply[i])
+    if (!layoutMod) continue
+    tree = jsx(layoutMod.default, { children: tree })
+  }
+  return renderToString(tree)
+}
-  const layoutData = await loadLayout()
-  const metadata = layoutData?.metadata
+// ── Root layout + metadata ──────────────────────────────────────────
+async function renderRootLayout(rootLayout: Loaded | null, body: Child): Promise<string> {
+  if (!rootLayout) {
+    // Fallback root if user didn't write src/app/layout.tsx
+    const fallback = jsx('html', {
+      lang: 'en',
+      children: [
+        jsx('head', { children: jsx('meta', { charSet: 'utf-8' }) }),
+        jsx('body', { children: body }),
+      ],
+    })
+    return renderToString(fallback)
+  }
+  const tree = jsx(rootLayout.default, { children: body })
+  return renderToString(tree)
+}
-  // Build the tree: <Layout><App /></Layout> or just <App />
-  const appNode = jsx(App as Component, null)
-  const tree: Child = layoutData
-    ? jsx(layoutData.component as Component, { children: appNode })
-    : appNode
+// ── Navigation script (injected once) ───────────────────────────────
+const NAV_SCRIPT = `
+<script>
+(function(){
+  function showRoute(path){
+    var blocks=document.querySelectorAll('[data-murasaki-route]');
+    var matched=false;
+    for(var i=0;i<blocks.length;i++){
+      var b=blocks[i];
+      if(b.getAttribute('data-murasaki-route')===path){
+        b.removeAttribute('hidden');matched=true;
+      } else {
+        b.setAttribute('hidden','');
+      }
+    }
+    if(!matched){
+      // fallback to "/"
+      var root=document.querySelector('[data-murasaki-route="/"]');
+      if(root)root.removeAttribute('hidden');
+    }
+    document.dispatchEvent(new CustomEvent('murasaki:navigate',{detail:{path:path}}));
+  }
+  function currentPath(){
+    var h=location.hash||'';
+    return h.charAt(0)==='#'?h.slice(1)||'/':'/'
+  }
+  window.addEventListener('hashchange',function(){showRoute(currentPath())});
+  document.addEventListener('click',function(e){
+    var t=e.target;
+    while(t&&t.nodeType===1){
+      if(t.tagName==='A'&&t.hasAttribute('data-murasaki-link')){
+        e.preventDefault();
+        var href=t.getAttribute('data-murasaki-link');
+        if('#'+href!==location.hash){location.hash=href;}
+        else{showRoute(href);}
+        return;
+      }
+      t=t.parentNode;
+    }
+  });
+  // Initial render
+  showRoute(currentPath());
+})();
+</script>
+`.trim()
-  let html = '<!doctype html>' + renderToString(tree)
+// ── Globals.css discovery (app/ takes precedence over src/) ─────────
+function loadGlobalsCss(): string {
+  for (const p of [APP_GLOBALS_CSS, LEGACY_GLOBALS_CSS]) {
+    if (existsSync(p)) {
+      try {
+        return readFileSync(p, 'utf8')
+      } catch {}
+    }
+  }
+  return ''
+}
+// ── Head injection ──────────────────────────────────────────────────
+function injectHead(html: string, metadata: Metadata | undefined, css: string): string {
   const headInjects: string[] = []
   if (metadata?.title && !/<title>.*?<\/title>/i.test(html)) {
     headInjects.push(`<title>${escapeHtml(metadata.title)}</title>`)
@@ -45,20 +159,67 @@ export async function renderApp(): Promise<RenderResult> {
   if (metadata?.description && !/<meta[^>]+name=["']description["']/i.test(html)) {
     headInjects.push(`<meta name="description" content="${escapeHtml(metadata.description)}">`)
   }
-  const css = loadGlobalsCss()
   if (css) {
     headInjects.push(`<style data-murasaki="globals.css">${css}</style>`)
   }
+  if (!headInjects.length) return html
+  const blob = headInjects.join('')
+  if (html.includes('</head>')) return html.replace('</head>', blob + '</head>')
+  return html.replace('<body', blob + '<body')
+}
-  if (headInjects.length) {
-    const blob = headInjects.join('')
-    if (html.includes('</head>')) {
-      html = html.replace('</head>', blob + '</head>')
-    } else {
-      html = html.replace('<body', blob + '<body')
-    }
+// ── Main entry ──────────────────────────────────────────────────────
+export async function renderApp(): Promise<RenderResult> {
+  // 1. Try app-router convention first
+  if (existsSync(APP_DIR)) {
+    return renderAppRouter()
+  }
+  // 2. Fall back to legacy single-page
+  if (existsSync(LEGACY_APP_PATH)) {
+    return renderLegacy()
+  }
+  return { html: NO_APP_HTML }
+}
+async function renderAppRouter(): Promise<RenderResult> {
+  const routes = discoverRoutes(APP_DIR)
+  if (routes.length === 0) return { html: NO_APP_HTML }
+  // Identify root layout (src/app/layout.tsx) if any
+  const rootLayoutPath = routes[0]?.layoutFiles[0]
+  const rootLayoutFile =
+    rootLayoutPath && rootLayoutPath.endsWith('/app/layout.tsx') ? rootLayoutPath : null
+  const rootLayoutMod = rootLayoutFile ? await loadModule(rootLayoutFile) : null
+  const metadata = rootLayoutMod?.metadata
+  // 2. Render each page (wrapped in its nested layouts, excluding root)
+  const blocks: string[] = []
+  for (const route of routes) {
+    const inner = await renderPageInner(route, rootLayoutFile)
+    blocks.push(`<div data-murasaki-route="${escapeHtml(route.path)}" hidden>${inner}</div>`)
   }
+  const switcher = raw(blocks.join('') + NAV_SCRIPT)
+  // 3. Render root layout with switcher as children
+  const bodyContent = await renderRootLayout(rootLayoutMod, switcher)
+  let html = '<!doctype html>' + bodyContent
+  // 4. Inject metadata + globals.css
+  html = injectHead(html, metadata, loadGlobalsCss())
+  return { html, metadata }
+}
+// ── Legacy single-page render (unchanged shape) ─────────────────────
+async function renderLegacy(): Promise<RenderResult> {
+  const pageMod = await loadModule(LEGACY_APP_PATH)
+  if (!pageMod) return { html: NO_APP_HTML }
+  const layoutMod = await loadModule(LEGACY_LAYOUT_PATH)
+  const metadata = layoutMod?.metadata
+  const body: Child = layoutMod
+    ? jsx(layoutMod.default, { children: jsx(pageMod.default, null) })
+    : jsx(pageMod.default, null)
+  let html = '<!doctype html>' + renderToString(body)
+  html = injectHead(html, metadata, loadGlobalsCss())
   return { html, metadata }
 }

package/src/runtime/routes.ts ADDED Viewed

@@ -0,0 +1,73 @@
+// File-based route discovery for src/app/.
+//
+// Conventions (subset of Next.js app router):
+//   src/app/page.tsx          → "/"
+//   src/app/layout.tsx        → root layout (wraps everything)
+//   src/app/about/page.tsx    → "/about"
+//   src/app/about/layout.tsx  → nested layout for /about and its children
+//   src/app/_foo/             → ignored (leading underscore = private)
+//
+// A page.tsx is required to register a route. A layout.tsx without a
+// page.tsx in the same dir just contributes to children's layouts.
+import { existsSync, readdirSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+export type Route = {
+  /** URL-style path: "/", "/about", "/settings/profile" */
+  path: string
+  /** Absolute path to the page.tsx file */
+  pageFile: string
+  /** Absolute paths to layout.tsx files, OUTERMOST first (root → innermost) */
+  layoutFiles: string[]
+}
+export function discoverRoutes(appDir: string): Route[] {
+  if (!existsSync(appDir)) return []
+  const out: Route[] = []
+  walk(appDir, '', [], out)
+  // Stable sort so "/" comes first, then alphabetical
+  out.sort((a, b) => {
+    if (a.path === '/') return -1
+    if (b.path === '/') return 1
+    return a.path.localeCompare(b.path)
+  })
+  return out
+}
+function walk(dir: string, routePath: string, layouts: string[], out: Route[]): void {
+  let entries: string[]
+  try {
+    entries = readdirSync(dir)
+  } catch {
+    return
+  }
+  const hasLayout = entries.includes('layout.tsx')
+  const hasPage = entries.includes('page.tsx')
+  // The current directory contributes its layout to itself and descendants.
+  const ownLayouts = hasLayout ? [...layouts, join(dir, 'layout.tsx')] : layouts
+  if (hasPage) {
+    out.push({
+      path: routePath || '/',
+      pageFile: join(dir, 'page.tsx'),
+      layoutFiles: ownLayouts,
+    })
+  }
+  // Recurse into subdirectories (skip files, hidden, private "_*", node_modules).
+  for (const entry of entries) {
+    if (entry.startsWith('.') || entry.startsWith('_') || entry === 'node_modules') continue
+    const full = join(dir, entry)
+    let isDir = false
+    try {
+      isDir = statSync(full).isDirectory()
+    } catch {
+      continue
+    }
+    if (!isDir) continue
+    walk(full, `${routePath}/${entry}`, ownLayouts, out)
+  }
+}

package/src/runtime/load.ts DELETED Viewed

@@ -1,39 +0,0 @@
-// Loads the user's src/app.tsx, src/layout.tsx, src/globals.css.
-// Uses cache-busting dynamic import so file edits are picked up
-// without restarting the Node process.
-import { existsSync, readFileSync } from 'node:fs'
-import { pathToFileURL } from 'node:url'
-import { APP_PATH, GLOBALS_CSS, LAYOUT_PATH } from '../env.ts'
-import type { Metadata } from '../index.ts'
-import type { AppComponent, LayoutModule } from '../types.ts'
-async function dynImport(path: string) {
-  const url = pathToFileURL(path).href + `?v=${Date.now()}`
-  return import(url)
-}
-export async function loadApp(): Promise<AppComponent | null> {
-  if (!existsSync(APP_PATH)) return null
-  const mod = await dynImport(APP_PATH)
-  return mod.default as AppComponent
-}
-export async function loadLayout(): Promise<LayoutModule> {
-  if (!existsSync(LAYOUT_PATH)) return null
-  const mod = await dynImport(LAYOUT_PATH)
-  if (!mod.default) return null
-  return {
-    component: mod.default as AppComponent,
-    metadata: mod.metadata as Metadata | undefined,
-  }
-}
-export function loadGlobalsCss(): string {
-  if (!existsSync(GLOBALS_CSS)) return ''
-  try {
-    return readFileSync(GLOBALS_CSS, 'utf8')
-  } catch {
-    return ''
-  }
-}