npm - toiljs - Versions diffs - 0.0.5 → 0.0.6 - Mend

toiljs 0.0.5 → 0.0.6

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 (83) hide show

package/build/cli/.tsbuildinfo +1 -1
package/build/cli/create.js +75 -61
package/build/client/.tsbuildinfo +1 -1
package/build/client/channel/channel.d.ts +23 -0
package/build/client/channel/channel.js +94 -0
package/build/client/head/head.d.ts +26 -0
package/build/client/head/head.js +87 -0
package/build/client/index.d.ts +17 -17
package/build/client/index.js +10 -10
package/build/client/navigation/Link.d.ts +8 -0
package/build/client/navigation/Link.js +44 -0
package/build/client/navigation/NavLink.d.ts +14 -0
package/build/client/navigation/NavLink.js +37 -0
package/build/client/navigation/navigation.d.ts +13 -0
package/build/client/navigation/navigation.js +97 -0
package/build/client/navigation/prefetch.d.ts +11 -0
package/build/client/navigation/prefetch.js +100 -0
package/build/client/navigation/scroll.d.ts +8 -0
package/build/client/navigation/scroll.js +36 -0
package/build/client/routing/Router.d.ts +7 -0
package/build/client/routing/Router.js +55 -0
package/build/client/routing/error-boundary.d.ts +16 -0
package/build/client/routing/error-boundary.js +19 -0
package/build/client/routing/hooks.d.ts +17 -0
package/build/client/routing/hooks.js +48 -0
package/build/client/routing/lazy.d.ts +16 -0
package/build/client/routing/lazy.js +53 -0
package/build/client/routing/match.d.ts +2 -0
package/build/client/routing/match.js +32 -0
package/build/client/routing/mount.d.ts +2 -0
package/build/client/routing/mount.js +13 -0
package/build/client/routing/params-context.d.ts +2 -0
package/build/client/routing/params-context.js +2 -0
package/build/compiler/.tsbuildinfo +1 -1
package/build/compiler/config.js +10 -1
package/build/compiler/generate.js +18 -8
package/build/compiler/plugin.js +14 -0
package/examples/basic/client/components/HoneycombBackground.tsx +162 -0
package/examples/basic/client/layout.tsx +12 -8
package/examples/basic/client/public/favicon.ico +0 -0
package/examples/basic/client/public/index.html +2 -1
package/package.json +2 -2
package/src/cli/create.ts +100 -73
package/src/client/index.ts +17 -17
package/src/client/{NavLink.tsx → navigation/NavLink.tsx} +1 -1
package/src/client/{prefetch.ts → navigation/prefetch.ts} +2 -2
package/src/client/{Router.tsx → routing/Router.tsx} +3 -3
package/src/client/{error-boundary.tsx → routing/error-boundary.tsx} +1 -1
package/src/client/{hooks.ts → routing/hooks.ts} +2 -2
package/src/client/{lazy.ts → routing/lazy.ts} +1 -1
package/src/client/{mount.tsx → routing/mount.tsx} +3 -3
package/src/compiler/config.ts +11 -2
package/src/compiler/generate.ts +24 -8
package/src/compiler/plugin.ts +19 -0
package/templates/app/client/404.tsx +11 -0
package/templates/app/client/components/.gitkeep +1 -0
package/templates/app/client/components/Footer.tsx +8 -0
package/templates/app/client/components/HoneycombBackground.tsx +162 -0
package/templates/app/client/layout.tsx +53 -0
package/templates/app/client/public/favicon.ico +0 -0
package/templates/app/client/public/images/.gitkeep +1 -0
package/templates/app/client/public/images/logo.svg +37 -0
package/templates/app/client/public/index.html +16 -0
package/templates/app/client/public/robots.txt +2 -0
package/templates/app/client/routes/about.tsx +11 -0
package/templates/app/client/routes/blog/[id].tsx +12 -0
package/templates/app/client/routes/docs/[...slug].tsx +12 -0
package/templates/app/client/routes/get-started.tsx +84 -0
package/templates/app/client/routes/index.tsx +80 -0
package/templates/app/client/routes/io.tsx +24 -0
package/templates/app/client/styles/main.css +461 -0
package/templates/app/client/toil.tsx +7 -0
package/test/channel.test.ts +1 -1
package/test/head.test.ts +1 -1
package/test/navlink.test.ts +1 -1
package/test/routes.test.ts +1 -1
/package/src/client/{channel.ts → channel/channel.ts} +0 -0
/package/src/client/{head.ts → head/head.ts} +0 -0
/package/src/client/{Link.tsx → navigation/Link.tsx} +0 -0
/package/src/client/{navigation.ts → navigation/navigation.ts} +0 -0
/package/src/client/{scroll.ts → navigation/scroll.ts} +0 -0
/package/src/client/{match.ts → routing/match.ts} +0 -0
/package/src/client/{params-context.ts → routing/params-context.ts} +0 -0

package/examples/basic/client/layout.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import Footer from './components/Footer';
+import HoneycombBackground from './components/HoneycombBackground';
 const GitHubIcon = () => (
     <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
@@ -10,26 +11,29 @@ const GitHubIcon = () => (
 export default function Layout({ children }: { children?: ReactNode }) {
     return (
         <div className="app">
+            <HoneycombBackground />
             <Toil.Head
-                titleTemplate="%s · ToilJS"
+                titleTemplate="%s By Dacely"
                 title="ToilJS"
                 meta={[{ name: 'description', content: 'The most performant React framework.' }]}
             />
             <header className="nav">
-                <a href="/" className="nav-logo">
+                <Toil.Link href="/" className="nav-logo">
                     <img src="images/logo.svg" alt="ToilJS" width={28} height={28} />
                     <span>ToilJS</span>
-                </a>
+                </Toil.Link>
                 <nav className="nav-center">
-                    <Toil.NavLink href="/" end className="nav-center-link">Home</Toil.NavLink>
-                    <Toil.NavLink href="/get-started" className="nav-center-link">Get Started</Toil.NavLink>
+                    <Toil.NavLink href="/" end className="nav-center-link">
+                        Home
+                    </Toil.NavLink>
+                    <Toil.NavLink href="/get-started" className="nav-center-link">
+                        Get Started
+                    </Toil.NavLink>
                 </nav>
                 <nav className="nav-links">
-                    <Toil.Link href="https://toil.org/docs">
-                        Docs
-                    </Toil.Link>
+                    <Toil.Link href="https://toil.org/docs">Docs</Toil.Link>
                     <a
                         href="https://github.com/btc-vision/toiljs"
                         target="_blank"

package/examples/basic/client/public/favicon.ico ADDED Viewed

Binary file

package/examples/basic/client/public/index.html CHANGED Viewed

@@ -4,7 +4,8 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#080D11" />
-        <title>toiljs · basic</title>
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <title>ToilJS By Dacely</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet" />

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "author": "Dacely",
     "description": "todo",
     "engines": {
@@ -102,7 +102,7 @@
         "eslint-plugin-react-hooks": "^7.1.0-canary-ab18f33d-20260220",
         "eslint-plugin-react-refresh": "^0.5.2",
         "picocolors": "^1.1.1",
-        "toilscript": "^0.1.2",
+        "toilscript": "^0.1.4",
         "typescript-eslint": "^8.60.0",
         "vite": "^8.0.14",
         "vite-plugin-node-polyfills": "^0.28.0"

package/src/cli/create.ts CHANGED Viewed

@@ -5,6 +5,7 @@
  */
 import fs from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import {
     intro,
@@ -25,6 +26,7 @@ import {
     PKG_VERSION,
     PREPROCESSORS,
     requiredPackages,
+    setStyleImports,
     styleEntry,
     styleImportLines,
     TAILWIND_CSS,
@@ -146,51 +148,6 @@ function scaffold(
         'eslint.config.js': "import toiljs from 'toiljs/eslint';\n\nexport default toiljs;\n",
         '.prettierrc': '"toiljs/prettier"\n',
         '.gitignore': 'node_modules\nbuild\n.toil\ntoil-env.d.ts\n',
-        'client/public/index.html':
-            '<!doctype html>\n<html lang="en">\n  <head>\n' +
-            '    <meta charset="utf-8" />\n' +
-            '    <meta name="viewport" content="width=device-width, initial-scale=1" />\n' +
-            '    <meta name="theme-color" content="#080D11" />\n' +
-            '    <meta name="description" content="" />\n' +
-            '    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n' +
-            '    <link rel="manifest" href="/manifest.webmanifest" />\n' +
-            `    <title>${path.basename(name)}</title>\n` +
-            '  </head>\n  <body>\n    <div id="root"></div>\n  </body>\n</html>\n',
-        'client/public/favicon.svg':
-            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\n' +
-            '  <defs>\n' +
-            '    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">\n' +
-            '      <stop offset="0" stop-color="#2563FF" />\n' +
-            '      <stop offset="0.5" stop-color="#7C3AED" />\n' +
-            '      <stop offset="1" stop-color="#22E3AB" />\n' +
-            '    </linearGradient>\n' +
-            '  </defs>\n' +
-            '  <rect width="32" height="32" rx="7" fill="#080D11" />\n' +
-            '  <path d="M9 10h14v3.2h-5.4V24h-3.2V13.2H9z" fill="url(#g)" />\n' +
-            '</svg>\n',
-        'client/public/robots.txt': 'User-agent: *\nAllow: /\n',
-        'client/public/manifest.webmanifest':
-            JSON.stringify(
-                {
-                    name: path.basename(name),
-                    short_name: path.basename(name),
-                    start_url: '/',
-                    display: 'standalone',
-                    background_color: '#080D11',
-                    theme_color: '#080D11',
-                    icons: [{ src: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }],
-                },
-                null,
-                4,
-            ) + '\n',
-        'client/public/images/.gitkeep': '# Place images and other static assets here; served at /images/*.\n',
-        'client/toil.tsx':
-            "import { routes, layout, notFound } from 'toiljs/routes';\n\n" +
-            styleImportLines(features).join('\n') +
-            '\n\n' +
-            'Toil.mount(routes, layout, notFound);\n',
-        [`client/${styleEntry(features.preprocessor)}`]: DEFAULT_STYLE_CONTENT,
-        'client/components/.gitkeep': '# Place shared React components here.\n',
         'toil-env.d.ts': TOIL_ENV_DTS,
         'toilconfig.json':
             JSON.stringify(
@@ -241,6 +198,70 @@ function scaffold(
             "import { add } from './index';\n\n" +
             '@main\nfunction run(): i32 {\n    return add(40, 2);\n}\n',
         'README.md': ['# ' + path.basename(name), '', 'A [toiljs](https://toil.org) app.', '', '## Develop', '', '    npm install', '    npm run dev', '', '## Build', '', '    npm run build', ''].join('\n'),
+    };
+    // The `app` template's client UI is copied from templates/app at runtime; `minimal` ships an
+    // inline client here.
+    if (template === 'minimal') Object.assign(files, minimalClient(name, features));
+    // Selected AI-assistant pointer files at the root (committed). The real docs are always seeded
+    // under .toil/docs (gitignored; regenerated by dev/build) since the framework manages them.
+    Object.assign(files, aiHelperFiles(aiTools));
+    for (const [docName, content] of Object.entries(TOIL_DOCS)) {
+        files[`.toil/docs/${docName}`] = content;
+    }
+    return files;
+}
+/** The inline client UI for the `minimal` template (the `app` template copies templates/app). */
+function minimalClient(name: string, features: StyleFeatures): Record<string, string> {
+    const files: Record<string, string> = {
+        'client/public/index.html':
+            '<!doctype html>\n<html lang="en">\n  <head>\n' +
+            '    <meta charset="utf-8" />\n' +
+            '    <meta name="viewport" content="width=device-width, initial-scale=1" />\n' +
+            '    <meta name="theme-color" content="#080D11" />\n' +
+            '    <meta name="description" content="" />\n' +
+            '    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n' +
+            '    <link rel="manifest" href="/manifest.webmanifest" />\n' +
+            `    <title>${path.basename(name)}</title>\n` +
+            '  </head>\n  <body>\n    <div id="root"></div>\n  </body>\n</html>\n',
+        'client/public/favicon.svg':
+            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\n' +
+            '  <defs>\n' +
+            '    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">\n' +
+            '      <stop offset="0" stop-color="#2563FF" />\n' +
+            '      <stop offset="0.5" stop-color="#7C3AED" />\n' +
+            '      <stop offset="1" stop-color="#22E3AB" />\n' +
+            '    </linearGradient>\n' +
+            '  </defs>\n' +
+            '  <rect width="32" height="32" rx="7" fill="#080D11" />\n' +
+            '  <path d="M9 10h14v3.2h-5.4V24h-3.2V13.2H9z" fill="url(#g)" />\n' +
+            '</svg>\n',
+        'client/public/robots.txt': 'User-agent: *\nAllow: /\n',
+        'client/public/manifest.webmanifest':
+            JSON.stringify(
+                {
+                    name: path.basename(name),
+                    short_name: path.basename(name),
+                    start_url: '/',
+                    display: 'standalone',
+                    background_color: '#080D11',
+                    theme_color: '#080D11',
+                    icons: [{ src: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }],
+                },
+                null,
+                4,
+            ) + '\n',
+        'client/public/images/.gitkeep': '# Place images and other static assets here; served at /images/*.\n',
+        'client/toil.tsx':
+            "import { routes, layout, notFound } from 'toiljs/routes';\n\n" +
+            styleImportLines(features).join('\n') +
+            '\n\n' +
+            'Toil.mount(routes, layout, notFound);\n',
+        [`client/${styleEntry(features.preprocessor)}`]: DEFAULT_STYLE_CONTENT,
+        'client/components/.gitkeep': '# Place shared React components here.\n',
         'client/layout.tsx': `import { type ReactNode } from 'react';
 export default function Layout({ children }: { children?: ReactNode }) {
@@ -257,7 +278,7 @@ export default function Layout({ children }: { children?: ReactNode }) {
                 }}>
                 <strong style={{ color: '#2563FF', fontSize: '1.1rem' }}>${path.basename(name)}</strong>
                 <nav style={{ display: 'flex', gap: '1rem' }}>
-                    <Toil.Link href="/">home</Toil.Link>${template === 'app' ? '\n                    <Toil.Link href="/about">about</Toil.Link>' : ''}
+                    <Toil.Link href="/">home</Toil.Link>
                 </nav>
             </header>
             {children}
@@ -270,38 +291,33 @@ export default function Layout({ children }: { children?: ReactNode }) {
             '    return (\n        <main>\n' +
             '            <h1>Welcome to toiljs</h1>\n' +
             '            <p>File-based routing, bundled by Vite, zero config.</p>\n' +
-            (template === 'app'
-                ? '            <p>\n                <Toil.Link href="/about">About</Toil.Link> · <Toil.Link href="/blog/42">Blog post 42</Toil.Link>\n            </p>\n'
-                : '') +
             '        </main>\n    );\n}\n',
     };
+    if (features.tailwind) files[`client/${TAILWIND_ENTRY}`] = TAILWIND_CSS;
+    return files;
+}
-    if (template === 'app') {
-        files['client/routes/about.tsx'] =
-            'export default function About() {\n' +
-            '    return (\n        <main>\n            <h1>About</h1>\n' +
-            '            <p>\n                This page is served by <code>client/routes/about.tsx</code>.\n            </p>\n' +
-            '            <Toil.Link href="/">Back home</Toil.Link>\n        </main>\n    );\n}\n';
-        files['client/routes/blog/[id].tsx'] =
-            'export default function BlogPost() {\n' +
-            '    const { id } = Toil.useParams();\n' +
-            '    return (\n        <main>\n            <h1>Blog post {id}</h1>\n' +
-            '            <p>\n                Dynamic route from <code>client/routes/blog/[id].tsx</code>.\n            </p>\n' +
-            '            <Toil.Link href="/">Back home</Toil.Link>\n        </main>\n    );\n}\n';
-    }
+/** Absolute path to a shipped template directory (e.g. `templates/app`). */
+function templateDir(template: Template): string {
+    return path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..', 'templates', template);
+}
-    if (features.tailwind) {
-        files[`client/${TAILWIND_ENTRY}`] = TAILWIND_CSS;
+/**
+ * Applies the chosen styling to a copied template's client dir: renames the stylesheet to the
+ * preprocessor's extension, adds the Tailwind entry, and rewrites `toil.tsx`'s style imports.
+ */
+async function applyStyling(clientDir: string, features: StyleFeatures): Promise<void> {
+    // Plain CSS without Tailwind is exactly what the template ships — leave it byte-for-byte.
+    if (features.preprocessor === 'css' && !features.tailwind) return;
+    const entry = styleEntry(features.preprocessor);
+    if (entry !== 'styles/main.css') {
+        await fs.rename(path.join(clientDir, 'styles', 'main.css'), path.join(clientDir, entry));
     }
-    // Selected AI-assistant pointer files at the root (committed). The real docs are always seeded
-    // under .toil/docs (gitignored; regenerated by dev/build) since the framework manages them.
-    Object.assign(files, aiHelperFiles(aiTools));
-    for (const [name, content] of Object.entries(TOIL_DOCS)) {
-        files[`.toil/docs/${name}`] = content;
+    if (features.tailwind) {
+        await fs.writeFile(path.join(clientDir, TAILWIND_ENTRY), TAILWIND_CSS, 'utf8');
     }
-    return files;
+    const toilPath = path.join(clientDir, 'toil.tsx');
+    await fs.writeFile(toilPath, setStyleImports(await fs.readFile(toilPath, 'utf8'), features), 'utf8');
 }
 async function writeFiles(dir: string, files: Record<string, string>): Promise<void> {
@@ -366,7 +382,7 @@ export async function runCreate(opts: CreateOptions): Promise<void> {
     let template: Template = opts.template ?? 'app';
     if (!opts.template && !opts.yes) {
         const templateOptions: TemplateOption[] = [
-            { value: 'app', label: 'App', hint: 'layout + home/about + a dynamic /blog/[id] route' },
+            { value: 'app', label: 'App', hint: 'the full ToilJS starter — landing page, layout, styles, demo routes' },
             { value: 'minimal', label: 'Minimal', hint: 'just a layout and a home route' },
         ];
         const choice = await select({ message: 'Which template?', options: templateOptions, initialValue: 'app' });
@@ -430,6 +446,17 @@ export async function runCreate(opts: CreateOptions): Promise<void> {
     const s = spinner();
     s.start('Scaffolding project');
     await writeFiles(targetDir, scaffold(name, template, features, aiTools));
+    if (template === 'app') {
+        // Copy the full ToilJS starter UI, set its <title> to the project name, then apply styling.
+        await fs.cp(templateDir('app'), targetDir, { recursive: true });
+        const indexHtml = path.join(targetDir, 'client', 'public', 'index.html');
+        const html = await fs.readFile(indexHtml, 'utf8');
+        await fs.writeFile(
+            indexHtml,
+            html.replace(/<title>[^<]*<\/title>/, `<title>${path.basename(name)}</title>`),
+        );
+        await applyStyling(path.join(targetDir, 'client'), features);
+    }
     s.stop(`Scaffolded ${pc.cyan(rel)}`);
     if (initGit) {

package/src/client/index.ts CHANGED Viewed

@@ -8,14 +8,14 @@
  * `mount`, `match` (pure matcher), `prefetch` (link prefetcher), and `channel` (WebSocket helper).
  */
-export { mount } from './mount.js';
-export { Router } from './Router.js';
-export { Link } from './Link.js';
-export type { LinkProps } from './Link.js';
-export { NavLink, matchActive } from './NavLink.js';
-export type { NavLinkProps, NavLinkState } from './NavLink.js';
-export { navigate, back, forward, refresh } from './navigation.js';
-export type { NavigateOptions } from './navigation.js';
+export { mount } from './routing/mount.js';
+export { Router } from './routing/Router.js';
+export { Link } from './navigation/Link.js';
+export type { LinkProps } from './navigation/Link.js';
+export { NavLink, matchActive } from './navigation/NavLink.js';
+export type { NavLinkProps, NavLinkState } from './navigation/NavLink.js';
+export { navigate, back, forward, refresh } from './navigation/navigation.js';
+export type { NavigateOptions } from './navigation/navigation.js';
 export {
     useParams,
     useNavigate,
@@ -24,9 +24,9 @@ export {
     useSearchParams,
     useRouter,
     useNavigationPending,
-} from './hooks.js';
-export type { RouterInstance } from './hooks.js';
-export { prefetch } from './prefetch.js';
+} from './routing/hooks.js';
+export type { RouterInstance } from './routing/hooks.js';
+export { prefetch } from './navigation/prefetch.js';
 export type {
     RouteDef,
     LayoutLoader,
@@ -34,9 +34,9 @@ export type {
     NotFoundLoader,
     RouteErrorProps,
 } from './types.js';
-export { matchRoute } from './match.js';
-export type { RouteParams } from './match.js';
-export { connectChannel, useChannel, resolveChannelUrl } from './channel.js';
-export type { Channel, ChannelOptions, ChannelHook, ChannelData } from './channel.js';
-export { useHead, useTitle, Head, mergeHead } from './head.js';
-export type { HeadSpec, MetaTag, LinkTag, ResolvedHead } from './head.js';
+export { matchRoute } from './routing/match.js';
+export type { RouteParams } from './routing/match.js';
+export { connectChannel, useChannel, resolveChannelUrl } from './channel/channel.js';
+export type { Channel, ChannelOptions, ChannelHook, ChannelData } from './channel/channel.js';
+export { useHead, useTitle, Head, mergeHead } from './head/head.js';
+export type { HeadSpec, MetaTag, LinkTag, ResolvedHead } from './head/head.js';

package/src/client/{NavLink.tsx → navigation/NavLink.tsx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { useLocation } from './hooks.js';
+import { useLocation } from '../routing/hooks.js';
 import { Link, type LinkProps } from './Link.js';
 /** State passed to `NavLink`'s function-form `className` / `style` / `children`. */

package/src/client/{prefetch.ts → navigation/prefetch.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { matchRoute } from './match.js';
-import type { RouteDef } from './types.js';
+import { matchRoute } from '../routing/match.js';
+import type { RouteDef } from '../types.js';
 declare global {
     interface Navigator {

package/src/client/{Router.tsx → routing/Router.tsx} RENAMED Viewed

@@ -12,9 +12,9 @@ import {
 } from './lazy.js';
 import { matchRoute, type RouteParams } from './match.js';
 import { ParamsContext } from './params-context.js';
-import { settleNavigation } from './navigation.js';
-import { applyScroll } from './scroll.js';
-import type { LayoutLoader, NotFoundLoader, RouteDef } from './types.js';
+import { settleNavigation } from '../navigation/navigation.js';
+import { applyScroll } from '../navigation/scroll.js';
+import type { LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
 /** Matches the current location to a route and renders it, optionally wrapped in the root layout. */
 export function Router(props: {

package/src/client/{error-boundary.tsx → routing/error-boundary.tsx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { Component, Suspense, type ComponentType, type ReactNode } from 'react';
-import type { RouteErrorProps } from './types.js';
+import type { RouteErrorProps } from '../types.js';
 interface ErrorBoundaryProps {
     readonly fallback: ComponentType<RouteErrorProps>;

package/src/client/{hooks.ts → routing/hooks.ts} RENAMED Viewed

@@ -21,9 +21,9 @@ import {
     subscribeLocation,
     subscribePending,
     type NavigateOptions,
-} from './navigation.js';
+} from '../navigation/navigation.js';
 import { ParamsContext } from './params-context.js';
-import { prefetch } from './prefetch.js';
+import { prefetch } from '../navigation/prefetch.js';
 /** Imperative router handle returned by {@link useRouter}. */
 export interface RouterInstance {

package/src/client/{lazy.ts → routing/lazy.ts} RENAMED Viewed

@@ -11,7 +11,7 @@ import type {
     NotFoundLoader,
     RouteDef,
     RouteErrorProps,
-} from './types.js';
+} from '../types.js';
 type Loader<P> = () => Promise<{ default: ComponentType<P> }>;

package/src/client/{mount.tsx → routing/mount.tsx} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { createRoot } from 'react-dom/client';
-import { initNavigation } from './navigation.js';
-import { startPrefetcher } from './prefetch.js';
+import { initNavigation } from '../navigation/navigation.js';
+import { startPrefetcher } from '../navigation/prefetch.js';
 import { Router } from './Router.js';
-import type { LayoutLoader, NotFoundLoader, RouteDef } from './types.js';
+import type { LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
 /**
  * Mounts the toil client app into `#root` and starts idle link prefetching. Called by the

package/src/compiler/config.ts CHANGED Viewed

@@ -78,14 +78,23 @@ export function defineConfig(config: ToilConfig): ToilConfig {
     return config;
 }
-const CONFIG_NAMES = ['toil.config.ts', 'toil.config.mts', 'toil.config.js', 'toil.config.mjs'];
+const CONFIG_NAMES = [
+    'toil.config.ts',
+    'toil.config.mts',
+    'toil.config.js',
+    'toil.config.mjs',
+    'toiljs.config.ts',
+    'toiljs.config.mts',
+    'toiljs.config.js',
+    'toiljs.config.mjs',
+];
 /** Path to the built client runtime (`build/client/index.js`), sibling to `build/compiler`. */
 function resolveRuntimePath(): string {
     return path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../client/index.js');
 }
-/** Finds and loads `toil.config.*` from `root` (via Vite's bundling loader), then resolves defaults. */
+/** Finds and loads `toil.config.*` or `toiljs.config.*` from `root`, then resolves defaults. */
 export async function loadConfig(
     opts: { root?: string; port?: number } = {},
 ): Promise<ResolvedToilConfig> {

package/src/compiler/generate.ts CHANGED Viewed

@@ -13,6 +13,27 @@ import { scanRoutes, type ScannedRoute } from './routes.js';
  * Lives at the project root because TypeScript's `include` globs skip dot-directories.
  * Exported so `toiljs create` can write it during scaffolding, before the first dev/build.
  */
+/** Side-effect style imports (e.g. `import './styles/main.css'`). */
+const STYLE_EXTENSIONS = ['css', 'scss', 'sass', 'less', 'styl', 'stylus', 'pcss', 'sss'];
+/** Asset imports whose default export is the resolved URL string (e.g. `import logo from './logo.svg'`). */
+const ASSET_EXTENSIONS = [
+    'svg',
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'webp',
+    'avif',
+    'ico',
+    'bmp',
+    'apng',
+];
+const STYLE_MODULES = STYLE_EXTENSIONS.map((ext) => `declare module '*.${ext}' {}`).join('\n');
+const ASSET_MODULES = ASSET_EXTENSIONS.map(
+    (ext) => `declare module '*.${ext}' {\n    const src: string;\n    export default src;\n}`,
+).join('\n');
 export const TOIL_ENV_DTS =
     `// AUTO-GENERATED by toil — do not edit.\n` +
     `declare const Toil: typeof import('toiljs/client');\n` +
@@ -21,14 +42,9 @@ export const TOIL_ENV_DTS =
     `declare const FastMap: typeof import('toiljs/io').FastMap;\n` +
     `declare const FastSet: typeof import('toiljs/io').FastSet;\n` +
     `\n` +
-    `declare module '*.css' {}\n` +
-    `declare module '*.scss' {}\n` +
-    `declare module '*.sass' {}\n` +
-    `declare module '*.less' {}\n` +
-    `declare module '*.styl' {}\n` +
-    `declare module '*.stylus' {}\n` +
-    `declare module '*.pcss' {}\n` +
-    `declare module '*.sss' {}\n` +
+    `${STYLE_MODULES}\n` +
+    `\n` +
+    `${ASSET_MODULES}\n` +
     `\n` +
     `declare module 'toiljs/routes' {\n` +
     `    export const routes: import('toiljs/client').RouteDef[];\n` +

package/src/compiler/plugin.ts CHANGED Viewed

@@ -11,6 +11,25 @@ import { generate } from './generate.js';
 export function toilPlugin(cfg: ResolvedToilConfig): Plugin {
     return {
         name: 'toil',
+        // Catch empty import specifiers in source and report the file — rolldown otherwise fails
+        // resolution with a cryptic "The specifiers must be a non-empty string. Received ''".
+        transform(code, id) {
+            const file = id.split('?')[0];
+            if (id.includes('\0') || file.includes('/node_modules/') || !/\.[mc]?[jt]sx?$/.test(file)) {
+                return null;
+            }
+            const empty =
+                /^[ \t]*import\s+(['"])\1\s*;?[ \t]*$/m.test(code) ||
+                /^[ \t]*import\b[^'"\n]*\bfrom\s+(['"])\1/m.test(code) ||
+                /^[ \t]*export\b[^'"\n]*\bfrom\s+(['"])\1/m.test(code) ||
+                /\bimport\s*\(\s*(['"])\1\s*\)/.test(code);
+            if (empty) {
+                throw new Error(
+                    `toil: empty import specifier (e.g. \`import '';\`) in ${file} — remove or complete the import.`,
+                );
+            }
+            return null;
+        },
         configureServer(server) {
             // Trailing slash so a sibling like `routes-extra/` doesn't match the `routes/` prefix.
             const routesPrefix = cfg.routesAbsDir.replace(/\\/g, '/').replace(/\/?$/, '/');

package/templates/app/client/404.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export default function NotFound() {
+    return (
+        <main>
+            <h1>404 — Page not found</h1>
+            <p>
+                This custom page is served from <code>client/404.tsx</code> whenever no route matches.
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/templates/app/client/components/.gitkeep ADDED Viewed

	@@ -0,0 +1 @@
1	+ # Place shared React components here.

package/templates/app/client/components/Footer.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+export default function Footer() {
+    return (
+        <footer className="footer">
+            Built with ToilJS · Powered by Dacely
+        </footer>
+    );
+}