create-foldkit-app 0.17.0 → 0.17.2

package/README.md

@@ -18,22 +18,33 @@ The CLI prompts you for a project name, starter example, and package manager. Pa
 
 ## Examples
 
-| Example          | Description                                                                         |
-| ---------------- | ----------------------------------------------------------------------------------- |
-| `counter`        | Simple increment/decrement with reset                                               |
-| `counters`       | A dynamic list of Counter Submodels with per-instance routing via a wrapper Message |
-| `stopwatch`      | Timer with start/stop/reset                                                         |
-| `weather`        | HTTP requests with async state handling                                             |
-| `todo`           | CRUD operations with localStorage persistence                                       |
-| `form`           | Form validation with async email checking                                           |
-| `snake`          | Classic game built with Subscriptions                                               |
-| `routing`        | URL routing with parser combinators and route parameters                            |
-| `query-sync`     | URL-driven filtering, sorting, and search                                           |
-| `shopping-cart`  | Complex state management with nested Models                                         |
-| `websocket-chat` | Managed resources with WebSocket                                                    |
-| `auth`           | Authentication with Submodels, OutMessage, and protected routes                     |
-| `embedding`      | A Foldkit widget embedded in a plain TypeScript host page with Ports and dispose    |
-| `ui-showcase`    | Every Foldkit UI component with routing                                             |
+| Example                  | Description                                                                                            |
+| ------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `counter`                | Simple increment/decrement with reset                                                                  |
+| `counters`               | A dynamic list of Counter Submodels with per-instance routing via a wrapper Message                    |
+| `todo`                   | CRUD operations with localStorage persistence                                                          |
+| `stopwatch`              | Timer with start/stop/reset                                                                            |
+| `crash-view`             | Custom crash fallback UI with crash.view and crash.report                                              |
+| `slow-warnings`          | Interactive lab for slow update, view, patch, and Subscription dependency warnings                     |
+| `form`                   | Form validation with async email checking                                                              |
+| `job-application`        | Multi-step form with async validation, file uploads, and per-step error indicators                     |
+| `weather`                | HTTP requests with async state handling                                                                |
+| `api-cache`              | Query caching in the Model with stale-while-revalidate, request deduplication, and interval refetching |
+| `routing`                | URL routing with parser combinators and route parameters                                               |
+| `query-sync`             | URL-driven filtering, sorting, and search with query parameters                                        |
+| `snake`                  | Classic game built with Subscriptions                                                                  |
+| `canvas-art`             | Declarative 2D canvas with shapes, animation-frame Subscriptions, and pointer events                   |
+| `generative-art`         | Perlin-noise flow field with evolving particle trails, mouse vortex, and high-frequency Messages       |
+| `auth`                   | Authentication with Submodels, OutMessage, and protected routes                                        |
+| `shopping-cart`          | Complex state management with nested Models and routing                                                |
+| `pixel-art`              | Pixel editor with undo/redo, UI components, and localStorage persistence                               |
+| `websocket-chat`         | Managed resources with WebSocket integration                                                           |
+| `managed-resource-layer` | Layer-backed ManagedResource lifecycle with an Effect service                                          |
+| `kanban`                 | Drag-and-drop board with fractional indexing, keyboard navigation, and screen reader announcements     |
+| `map`                    | Interactive MapLibre GL map with Mount and Subscriptions                                               |
+| `web-components`         | QR code designer wiring third-party web components into Foldkit with CustomElement.define              |
+| `embedding`              | A Foldkit widget embedded in a plain TypeScript host page with Ports and dispose                       |
+| `ui-showcase`            | Every Foldkit UI component with routing and Submodels                                                  |
 
 ## License
 

package/dist/commands/create.js

@@ -60,10 +60,10 @@ const validateProject = (name, projectPath, packageManager) => Effect.gen(functi
         return yield* Effect.fail(`Package manager '${packageManager}' is not available. Please install it first.`);
     }
 });
-const setupProject = (name, projectPath, example) => Effect.gen(function* () {
+const setupProject = (name, projectPath, example, packageManager) => Effect.gen(function* () {
     yield* Console.log(chalk.blue('🚀 Creating your Foldkit app...'));
     yield* Console.log('');
-    yield* createProject(name, projectPath, example);
+    yield* createProject(name, projectPath, example, packageManager);
     yield* Console.log(chalk.green(`✅ Created project`));
     yield* Console.log('');
 });
@@ -118,7 +118,7 @@ export const create = (input) => Effect.gen(function* () {
     const path = yield* Path.Path;
     const projectPath = path.resolve(name);
     yield* validateProject(name, projectPath, packageManager);
-    yield* setupProject(name, projectPath, example);
+    yield* setupProject(name, projectPath, example, packageManager);
     yield* installProjectDependencies(projectPath, packageManager, example);
     yield* displaySuccessMessage(name, packageManager);
     return name;

package/dist/examples.js

@@ -4,6 +4,7 @@ export const EXAMPLE_VALUES = [
     'todo',
     'stopwatch',
     'crash-view',
+    'slow-warnings',
     'form',
     'job-application',
     'weather',
@@ -17,7 +18,9 @@ export const EXAMPLE_VALUES = [
     'shopping-cart',
     'pixel-art',
     'websocket-chat',
+    'managed-resource-layer',
     'kanban',
+    'map',
     'web-components',
     'embedding',
     'ui-showcase',
@@ -48,6 +51,11 @@ export const examples = [
         title: 'crash-view',
         description: 'Custom crash fallback UI with crash.view and crash.report',
     },
+    {
+        value: 'slow-warnings',
+        title: 'slow-warnings',
+        description: 'Interactive lab for slow update, view, patch, and Subscription dependency warnings',
+    },
     {
         value: 'form',
         title: 'form',
@@ -113,11 +121,21 @@ export const examples = [
         title: 'websocket-chat',
         description: 'Managed resources with WebSocket integration',
     },
+    {
+        value: 'managed-resource-layer',
+        title: 'managed-resource-layer',
+        description: 'Layer-backed ManagedResource lifecycle with an Effect service',
+    },
     {
         value: 'kanban',
         title: 'kanban',
         description: 'Drag-and-drop board with fractional indexing, keyboard navigation, and screen reader announcements',
     },
+    {
+        value: 'map',
+        title: 'map',
+        description: 'Interactive MapLibre GL map with Mount and Subscriptions',
+    },
     {
         value: 'web-components',
         title: 'web-components',

package/dist/utils/files.js

@@ -2,18 +2,21 @@ import { Array, Effect, FileSystem, Match, Option, Path, Record, Ref, Schema, St
 import { HttpClient, HttpClientRequest, } from 'effect/unstable/http';
 import { fileURLToPath } from 'node:url';
 const GITHUB_API_BASE_URL = 'https://api.github.com/repos/foldkit/foldkit/contents/examples';
-const getBaseFiles = Effect.gen(function* () {
-    const fs = yield* FileSystem.FileSystem;
+const getTemplateRoot = Effect.gen(function* () {
     const path = yield* Path.Path;
     const currentDir = path.dirname(fileURLToPath(import.meta.url));
-    const templatesDir = path.resolve(currentDir, '..', '..', 'templates', 'base');
+    return path.resolve(currentDir, '..', '..', 'templates');
+});
+const getTemplateFiles = (templateDir) => Effect.gen(function* () {
+    const fs = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
     const fileContentByPath = yield* Ref.make({});
     const processEntry = (dir) => (entry) => Effect.gen(function* () {
         const fullPath = path.join(dir, entry);
         const stat = yield* fs.stat(fullPath);
         yield* Match.value(stat.type).pipe(Match.when('Directory', () => processDirectory(fullPath)), Match.when('File', () => Effect.gen(function* () {
             const content = yield* fs.readFileString(fullPath);
-            const relativePath = path.relative(templatesDir, fullPath);
+            const relativePath = path.relative(templateDir, fullPath);
             yield* Ref.update(fileContentByPath, files => ({
                 ...files,
                 [relativePath]: content,
@@ -26,20 +29,31 @@ const getBaseFiles = Effect.gen(function* () {
             concurrency: 'unbounded',
         });
     });
-    yield* processDirectory(templatesDir);
+    yield* processDirectory(templateDir);
     return yield* Ref.get(fileContentByPath);
 });
-export const createProject = (name, projectPath, example) => Effect.gen(function* () {
-    yield* createBaseFiles(projectPath);
-    yield* modifyBaseFiles(projectPath, name);
-    yield* createExampleFiles(projectPath, example);
+const getBaseFiles = Effect.gen(function* () {
+    const path = yield* Path.Path;
+    const templateRoot = yield* getTemplateRoot;
+    return yield* getTemplateFiles(path.join(templateRoot, 'base'));
 });
-const createBaseFiles = (projectPath) => Effect.gen(function* () {
+const getPackageManagerFiles = (packageManager) => Effect.gen(function* () {
     const fs = yield* FileSystem.FileSystem;
     const path = yield* Path.Path;
-    yield* fs.makeDirectory(projectPath, { recursive: true });
-    const baseFiles = yield* getBaseFiles;
-    yield* pipe(baseFiles, Record.toEntries, Effect.forEach(([filePath, content]) => Effect.gen(function* () {
+    const templateRoot = yield* getTemplateRoot;
+    const templateDir = path.join(templateRoot, 'package-managers', packageManager);
+    const isTemplateDirectoryPresent = yield* fs.exists(templateDir);
+    if (isTemplateDirectoryPresent) {
+        return yield* getTemplateFiles(templateDir);
+    }
+    else {
+        return {};
+    }
+});
+const createFiles = (projectPath, files) => Effect.gen(function* () {
+    const fs = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
+    yield* pipe(files, Record.toEntries, Effect.forEach(([filePath, content]) => Effect.gen(function* () {
         const targetPath = Match.value(filePath).pipe(Match.when('gitignore', () => '.gitignore'), Match.when('ignore', () => '.ignore'), Match.orElse(() => filePath));
         const fullPath = path.join(projectPath, targetPath);
         const dirPath = path.dirname(fullPath);
@@ -47,11 +61,29 @@ const createBaseFiles = (projectPath) => Effect.gen(function* () {
         yield* fs.writeFileString(fullPath, content);
     }), { concurrency: 'unbounded' }));
 });
+const createBaseFiles = (projectPath) => Effect.gen(function* () {
+    const fs = yield* FileSystem.FileSystem;
+    yield* fs.makeDirectory(projectPath, { recursive: true });
+    const baseFiles = yield* getBaseFiles;
+    yield* createFiles(projectPath, baseFiles);
+});
+const createPackageManagerFiles = (projectPath, packageManager) => Effect.gen(function* () {
+    const packageManagerFiles = yield* getPackageManagerFiles(packageManager);
+    yield* createFiles(projectPath, packageManagerFiles);
+});
+export const createProject = (name, projectPath, example, packageManager) => Effect.gen(function* () {
+    yield* createBaseFiles(projectPath);
+    yield* modifyBaseFiles(projectPath, name);
+    yield* createPackageManagerFiles(projectPath, packageManager);
+    yield* createExampleFiles(projectPath, example);
+});
 const modifyBaseFiles = (projectPath, name) => Effect.gen(function* () {
     const fs = yield* FileSystem.FileSystem;
     const path = yield* Path.Path;
     const packageJsonPath = path.join(projectPath, 'package.json');
-    return yield* fs.readFileString(packageJsonPath).pipe(Effect.map(String.replace('my-foldkit-app', name)), Effect.flatMap(updatedContent => fs.writeFileString(packageJsonPath, updatedContent)));
+    const content = yield* fs.readFileString(packageJsonPath);
+    const updatedContent = String.replace('my-foldkit-app', name)(content);
+    yield* fs.writeFileString(packageJsonPath, updatedContent);
 });
 const GitHubFileEntry = Schema.Struct({
     name: Schema.String,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-foldkit-app",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Create Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",

package/templates/package-managers/pnpm/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  msgpackr-extract: false