@namostack/cli 0.0.1 → 0.1.0-rc.1

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@namostack/cli",
-  "version": "0.0.1",
-  "description": "Not released yet: see https://docs.namostack.com",
-  "license": "MIT"
-}
+  "version": "0.1.0-rc.1",
+  "description": "Create, live test and publish namostack plugins.",
+  "license": "MIT",
+  "homepage": "https://docs.namostack.com",
+  "keywords": [
+    "namostack",
+    "plugin",
+    "cli"
+  ],
+  "type": "module",
+  "bin": {
+    "namostack": "./dist/index.mjs"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "!templates/*/node_modules",
+    "!templates/*/.turbo",
+    "!templates/*/dist"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.8.1",
+    "citty": "^0.2.2",
+    "picocolors": "^1.1.1",
+    "semver": "^7.8.5",
+    "tar": "^7.5.22",
+    "vite": "^8.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/semver": "^7.8.0",
+    "tsdown": "^0.23.1",
+    "typescript": "~6.0.2",
+    "@namostack/config": "0.0.0",
+    "@namostack/tsconfig": "0.0.0",
+    "@namostack/api-client": "0.0.0",
+    "@namostack/types": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "oxlint",
+    "typecheck": "tsc -b"
+  }
+}

package/templates/react/_gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/templates/react/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "template-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/source-serif-4": "^5.3.1",
+    "@juliensouki/seedui": "0.0.4",
+    "@namostack/plugin-sdk": "workspace:*",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "styled-components": "^6.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0"
+  }
+}

package/templates/react/public/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#4f46e5" />
+  <path d="M22 16h13a11 11 0 0 1 0 22h-6v10h-7zm7 6v10h6a5 5 0 0 0 0-10z" fill="#fff" fill-rule="evenodd" />
+</svg>

package/templates/react/src/App.tsx

@@ -0,0 +1,10 @@
+import { Text } from '@juliensouki/seedui';
+import { useNamostack } from './useNamostack';
+
+export function App() {
+  const { context } = useNamostack();
+
+  return (
+    <Text variant="h3">Welcome to your namostack plugin {context.name}</Text>
+  );
+}

package/templates/react/src/NamostackProvider.tsx

@@ -0,0 +1,32 @@
+import { ThemeProvider } from '@juliensouki/seedui';
+import type { Namostack } from '@namostack/plugin-sdk';
+import { useEffect, useState, type ReactNode } from 'react';
+import { NamostackContext } from './useNamostack';
+
+interface NamostackProviderProps {
+  namostack: Namostack;
+  children: ReactNode;
+}
+
+/** Shares the connection with every component, and follows the app's theme. */
+export function NamostackProvider({
+  namostack,
+  children,
+}: NamostackProviderProps) {
+  const [mode, setMode] = useState(namostack.context.theme.mode);
+
+  useEffect(
+    () => namostack.onThemeChange((theme) => setMode(theme.mode)),
+    [namostack],
+  );
+
+  useEffect(() => {
+    document.documentElement.style.colorScheme = mode;
+  }, [mode]);
+
+  return (
+    <NamostackContext.Provider value={namostack}>
+      <ThemeProvider mode={mode}>{children}</ThemeProvider>
+    </NamostackContext.Provider>
+  );
+}

package/templates/react/src/main.tsx

@@ -0,0 +1,20 @@
+import { connect } from '@namostack/plugin-sdk';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import { NamostackProvider } from './NamostackProvider';
+
+// seedui's fonts, as in the namostack app.
+import '@fontsource-variable/inter';
+import '@fontsource-variable/source-serif-4';
+
+// Plugins only run inside the namostack app: anywhere else, this throws.
+const namostack = await connect();
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <NamostackProvider namostack={namostack}>
+      <App />
+    </NamostackProvider>
+  </StrictMode>,
+);

package/templates/react/src/useNamostack.ts

@@ -0,0 +1,16 @@
+import type { Namostack } from '@namostack/plugin-sdk';
+import { createContext, useContext } from 'react';
+
+/** Provided by `NamostackProvider`. */
+export const NamostackContext = createContext<Namostack | undefined>(undefined);
+
+/** The data, user and UI methods of the namostack app. */
+export function useNamostack(): Namostack {
+  const namostack = useContext(NamostackContext);
+
+  if (!namostack) {
+    throw new Error('useNamostack is only usable inside NamostackProvider.');
+  }
+
+  return namostack;
+}

package/templates/react/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,7 @@
+import { namostackPlugin } from '@namostack/plugin-sdk/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react(), namostackPlugin()],
+});

package/templates/vanilla/_gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/templates/vanilla/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "template-vanilla",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@namostack/plugin-sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0"
+  }
+}

package/templates/vanilla/public/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#4f46e5" />
+  <path d="M22 16h13a11 11 0 0 1 0 22h-6v10h-7zm7 6v10h6a5 5 0 0 0 0-10z" fill="#fff" fill-rule="evenodd" />
+</svg>

package/templates/vanilla/src/main.ts

@@ -0,0 +1,17 @@
+import { connect, type PluginTheme } from '@namostack/plugin-sdk';
+
+// Plugins only run inside the namostack app: anywhere else, this throws.
+const namostack = await connect();
+
+/** Follows the app's light or dark mode; style against `[data-mode="dark"]`. */
+function applyTheme({ mode }: PluginTheme) {
+  document.documentElement.dataset.mode = mode;
+  document.documentElement.style.colorScheme = mode;
+}
+
+applyTheme(namostack.context.theme);
+namostack.onThemeChange(applyTheme);
+
+// textContent, not innerHTML: the name is the developer's own text.
+document.getElementById('root')!.textContent =
+  `Welcome to your namostack plugin ${namostack.context.name}`;

package/templates/vanilla/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "types": ["vite/client"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/vanilla/vite.config.ts

@@ -0,0 +1,6 @@
+import { namostackPlugin } from '@namostack/plugin-sdk/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [namostackPlugin()],
+});