create-fluixi 0.1.0-alpha.10 → 0.1.0-alpha.12

package/dist/index.js

@@ -140,25 +140,92 @@ const UI_DEPS = {
 };
 /** Build-time only: it runs in the config, not in the app. */
 const UI_DEV_DEPS = { '@fluixi-ui/resolver': 'alpha' };
+/**
+ * What `fluixi.d.ts` holds until the compiler regenerates it.
+ *
+ * Only the intrinsics: the component globals depend on which packages are installed and
+ * on the resolver rules, so listing them here would go stale the moment a component is
+ * added. The compiler rewrites the whole file on the first dev run.
+ */
+const INTRINSICS_DTS = `// GENERATED by @fluixi/compiler, do not edit.
+//
+// The reactive intrinsics, which the compiler lowers to their \`create*\` calls. They
+// need no import. This file is rewritten on the first \`fluixi dev\`, which adds the
+// components the resolver supplies without an import.
+import * as __fluixi_reactive_signal from '@fluixi/reactive/signal';
+import * as __fluixi_reactive_store from '@fluixi/reactive/store';
+
+declare global {
+  const $signal: typeof __fluixi_reactive_signal.signal;
+  const $memo: typeof __fluixi_reactive_signal.memo;
+  const $effect: typeof __fluixi_reactive_signal.effect;
+  const $store: typeof __fluixi_reactive_store.store;
+  const $resource: typeof __fluixi_reactive_signal.resource;
+  const $selector: typeof __fluixi_reactive_signal.createSelector;
+  const $deferred: typeof __fluixi_reactive_signal.createDeferred;
+  const $untrack: typeof __fluixi_reactive_signal.untrack;
+  const $untrackStore: typeof __fluixi_reactive_store.untrackStore;
+}
+`;
+/**
+ * The cascade-layer order, declared before anything defines a layer.
+ *
+ * A layer ranks by where it is FIRST declared, and one nobody declared is appended last,
+ * which makes it the strongest. That default is wrong twice over here. The fluixi-css
+ * reset defines `flx.base`, which @fluixi-ui's own sheets do not declare, so the reset
+ * would outrank the components it is meant to sit under, and an app's plain
+ * `button { ... }` reset would outrank them too.
+ *
+ * Declaring the order up front fixes both: the app's element resets sit lowest, then the
+ * engine's preflight, then the component layers. An app's own `@layer base` and
+ * `@layer components` are deliberately absent, so they stay unregistered and keep
+ * winning, which is what an app expects of its own classes.
+ */
+const LAYERS_CSS = `/* Cascade-layer order. Imported before any component CSS, because a layer ranks by
+   where it is first declared and an undeclared one would rank last, above everything.
+   Add this app's own layers only if you want them to rank BELOW the component styles. */
+@layer app-reset, flx.reset, flx.base, flx.tokens, flx.components, flx.skin;
+`;
 /** Add to a package.json section without dropping what the template already had. */
 function addDeps(pkg, section, deps) {
     pkg[section] = Object.fromEntries(Object.entries({ ...(pkg[section] ?? {}), ...deps }).sort(([a], [b]) => a.localeCompare(b)));
 }
 /**
- * The stylesheet the app imports, assembled from what was chosen.
+ * The app's own stylesheet, in the shape the chosen css engine expects.
  *
- * Tokens first: the kit's components read those custom properties, so a framework layer
- * loaded before them would be overridden by nothing and a component would render unstyled.
+ * The component tokens are not here: they are a stylesheet the package ships and the
+ * entry imports directly, so this file only holds what the engine has to read, the dark
+ * variant, where to scan, and the theme the app defines.
  */
 function styleSheet(ui, css) {
-    const lines = [];
-    if (ui === 'fluixi-ui')
-        lines.push(`@import '@fluixi-ui/tokens/css';`);
-    if (css === 'tailwind')
-        lines.push(`@import 'tailwindcss';`);
-    if (css === 'fluixi-css')
-        lines.push(`@import '@fluixi-css/core';`);
-    return lines.join('\n') + '\n';
+    // Dark from the attribute @fluixi/core's createTheme sets, not the OS preference, so
+    // a theme toggle in the app actually drives it.
+    const darkVariant = `@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));`;
+    // Where to look for utility classes. Relative to this file.
+    const sources = `@source '.';\n@source '../index.html';`;
+    const theme = `@theme {\n  /* Design tokens. A --color-* scale here drives the whole app. */\n}`;
+    if (css === 'fluixi-css') {
+        // The layers are pulled in by directive rather than by import, and they come last:
+        // `@theme` above has to be read before `utilities` is generated from it.
+        return [
+            darkVariant,
+            '',
+            sources,
+            '',
+            theme,
+            '',
+            '@fluixi base;',
+            '@fluixi utilities;',
+            '@fluixi components;',
+            '',
+        ].join('\n');
+    }
+    if (css === 'tailwind') {
+        return [`@import 'tailwindcss';`, '', darkVariant, '', theme, ''].join('\n');
+    }
+    // No css engine: the component tokens are imported from the entry like any other
+    // stylesheet, so there is nothing for this file to hold.
+    return '';
 }
 /** Where the component resolver is configured, which differs by mode. */
 const configFor = (mode) => mode === 'ssr' ? 'fluixi.config.ts' : 'vite.config.ts';
@@ -199,15 +266,29 @@ function addVitePlugin(target, mode, importLine, call) {
             : src.replace('plugins: [', `plugins: [\n    ${call},`);
     writeFileSync(file, src);
 }
-/** Import the stylesheet from whichever file boots the client. */
-function importStyles(target, mode, format) {
+/**
+ * Import the stylesheets from whichever file boots the client.
+ *
+ * The component tokens come first and from the entry rather than from `styles.css`:
+ * they are a stylesheet the package ships, not something the app's css engine should be
+ * asked to resolve, and the components below need them defined before their own rules
+ * land. `emitUiTokens` does not replace this, that bridge covers a subset.
+ */
+function importStyles(target, mode, ui, css) {
     const base = mode === 'ssr' ? 'entry-client' : 'main';
     const file = ['tsx', 'ts']
         .map((ext) => join(target, 'src', `${base}.${ext}`))
         .find((p) => existsSync(p));
     if (!file)
         return;
-    writeFileSync(file, `import './styles.css';\n` + readFileSync(file, 'utf8'));
+    const head = [
+        // First, before anything that defines a layer.
+        ...(css === 'fluixi-css' ? [`import './layers.css';`] : []),
+        ...(ui === 'fluixi-ui' ? [`import '@fluixi-ui/tokens/tokens.css';`] : []),
+        `import './styles.css';`,
+        '',
+    ].join('\n');
+    writeFileSync(file, head + readFileSync(file, 'utf8'));
 }
 async function main() {
     const args = argv.slice(2);
@@ -267,6 +348,13 @@ async function main() {
     const gi = join(target, '_gitignore');
     if (existsSync(gi))
         renameSync(gi, join(target, '.gitignore'));
+    // The ambient declarations for the `$` intrinsics.
+    //
+    // The compiler rewrites this file on the first `fluixi dev`, adding whatever the
+    // resolver supplies without an import. Shipping it now means an editor knows what
+    // `$signal` is before the app has ever been run, instead of reporting "Cannot find
+    // name" across a project that compiles.
+    writeFileSync(join(target, 'fluixi.d.ts'), INTRINSICS_DTS);
     const pkgPath = join(target, 'package.json');
     const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
     pkg.name = name;
@@ -286,11 +374,20 @@ async function main() {
         // The bridge only matters with the component kit installed: it maps the theme
         // scales onto the `--flx-ui-*` custom properties those components read.
         `fluixiCss({ reset: true${ui === 'fluixi-ui' ? ', emitUiTokens: true' : ''} })`);
-        writeFileSync(join(target, 'fluixi.css.config.js'), `const config = {\n  purge: true,\n  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\n  mode: { dark: '[data-theme="dark"]' },\n  theme: { extend: {} },\n};\n\nexport default config;\n`);
+        // No `fluixi.css.config.js`: `@theme`, `@source` and `@custom-variant` in the
+        // stylesheet say the same things, and a project with both has two places to change
+        // one colour. The config file is still read when an app adds one.
     }
     if (ui === 'fluixi-ui' || css !== 'none') {
-        writeFileSync(join(target, 'src', 'styles.css'), styleSheet(ui, css));
-        importStyles(target, mode, format);
+        // Only for fluixi-css: it is the engine that defines `flx.base`, and without a
+        // declared order that layer lands above the components it belongs under.
+        if (css === 'fluixi-css')
+            writeFileSync(join(target, 'src', 'layers.css'), LAYERS_CSS);
+        const sheet = styleSheet(ui, css);
+        // An empty sheet still gets written: it is where an app puts its own css, and the
+        // entry already imports it.
+        writeFileSync(join(target, 'src', 'styles.css'), sheet);
+        importStyles(target, mode, ui, css);
     }
     writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
     // Outro + next steps. The leading gutter only makes sense after the intro/prompts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fluixi",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.12",
   "license": "MIT",
   "author": "Ibrahima Touré",
   "description": "Scaffold a new Fluixi app — `npm create fluixi <dir>`.",

package/template-spa/src/app.tsx

@@ -1,13 +1,12 @@
-import { createSignal } from '@fluixi/core';
 
 export function App() {
-  const [count, setCount] = createSignal(0);
+  const count = $signal(0);
   return (
     <div class="app">
       <h1>Fluixi</h1>
-      <button onClick={() => setCount(count() - 1)}>-</button>
+      <button onClick={() => count.set(count() - 1)}>-</button>
       <span>{count()}</span>
-      <button onClick={() => setCount(count() + 1)}>+</button>
+      <button onClick={() => count.set(count() + 1)}>+</button>
     </div>
   );
 }

package/template-spa-html/src/app.ts

@@ -1,13 +1,13 @@
-import { createSignal, html } from '@fluixi/core';
+import { html } from '@fluixi/core';
 
 export function App() {
-  const [count, setCount] = createSignal(0);
+  const count = $signal(0);
   return html`
     <div class="app">
       <h1>Fluixi</h1>
-      <button @click=${() => setCount(count() - 1)}>-</button>
+      <button @click=${() => count.set(count() - 1)}>-</button>
       <span>${count()}</span>
-      <button @click=${() => setCount(count() + 1)}>+</button>
+      <button @click=${() => count.set(count() + 1)}>+</button>
     </div>
   `;
 }

package/template-ssr/src/app.tsx

@@ -1,4 +1,4 @@
-import { Router, Outlet, createMemoryHistory } from '@fluixi/start/router';
+import { Router, Outlet, Link, createMemoryHistory } from '@fluixi/start/router';
 import { Suspense } from '@fluixi/core';
 import { routes } from '@fluixi/core/routes';
 
@@ -8,9 +8,9 @@ function RootLayout() {
   return (
     <div class="app">
       <nav>
-        <a href="/">home</a>
+        <Link href="/">home</Link>
         {' · '}
-        <a href="/about">about</a>
+        <Link href="/about">about</Link>
       </nav>
       <main>
         <Suspense fallback={<p>loading…</p>}>

package/template-ssr/src/routes/index.tsx

@@ -1,4 +1,3 @@
-import { createResource } from '@fluixi/reactive/signal';
 import { seo } from '@fluixi/start/head';
 
 const tick = <T,>(v: T, ms = 30) => new Promise<T>((r) => setTimeout(() => r(v), ms));
@@ -6,7 +5,7 @@ const tick = <T,>(v: T, ms = 30) => new Promise<T>((r) => setTimeout(() => r(v),
 // A data-gated route, like a real page: the resource is awaited during SSR so the
 // content (not the spinner) is server-rendered, then hydrated.
 export default function Home() {
-  const [data] = createResource(() => tick('Hello from Fluixi Start 👋'));
+  const data = $resource(() => tick('Hello from Fluixi Start 👋'));
 
   // Per-route document head: rendered into <head> on the server (great for crawlers/links)
   // and kept reactive on the client. The head engine is always on; seo() is optional, call it

package/template-ssr-html/src/app.ts

@@ -1,4 +1,4 @@
-import { Router, Outlet, createMemoryHistory } from '@fluixi/start/router';
+import { Router, Outlet, createMemoryHistory, Link } from '@fluixi/start/router';
 import { Suspense } from '@fluixi/core';
 import { html } from '@fluixi/start';
 import { routes } from '@fluixi/core/routes';
@@ -10,7 +10,7 @@ function RootLayout() {
   return html`
     <div class="app">
       <nav>
-        <a href="/">home</a> · <a href="/about">about</a>
+        <${Link} href="/">home<//> · <${Link} href="/about">about<//>
       </nav>
       <main>
         <${Suspense} fallback=${html`<p>loading…</p>`}>

package/template-ssr-html/src/routes/index.ts

@@ -1,4 +1,3 @@
-import { createResource } from '@fluixi/reactive/signal';
 import { seo } from '@fluixi/start/head';
 import { html } from '@fluixi/start';
 
@@ -7,7 +6,7 @@ const tick = <T,>(v: T, ms = 30) => new Promise<T>((r) => setTimeout(() => r(v),
 // A data-gated route, like a real page: the resource is awaited during SSR so the
 // content (not the spinner) is server-rendered, then hydrated.
 export default function Home() {
-  const [data] = createResource(() => tick('Hello from Fluixi Start 👋'));
+  const data = $resource(() => tick('Hello from Fluixi Start 👋'));
 
   // Per-route document head: rendered into <head> on the server (great for crawlers/links)
   // and kept reactive on the client. seo() is optional; call it where you want metadata.