npm - @shopify/klint - Versions diffs - 0.0.98 → 0.2.0 - Mend

@shopify/klint 0.0.98 → 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 (15) hide show

package/bin/create-editor +423 -0
package/bin/create-sandbox +232 -0
package/bin/klint +146 -0
package/dist/index.cjs +2369 -317
package/dist/index.d.cts +847 -66
package/dist/index.d.ts +847 -66
package/dist/index.js +2362 -316
package/package.json +11 -17
package/dist/elements/index.cjs +0 -946
package/dist/elements/index.d.cts +0 -658
package/dist/elements/index.d.ts +0 -658
package/dist/elements/index.js +0 -913
package/dist/plugins/index.cjs +0 -1174
package/dist/plugins/index.d.ts +0 -731
package/dist/plugins/index.js +0 -1140

package/bin/create-editor ADDED Viewed

@@ -0,0 +1,423 @@
+#!/bin/bash
+# Auto-generated create-editor script
+# Generated from klint-editor working folder
+PROJECT_DIR="${1:-.}"
+PROJECT_NAME=$(basename "$PROJECT_DIR")
+echo "Creating Klint editor in $PROJECT_DIR..."
+# Create directory if it doesn't exist
+mkdir -p "$PROJECT_DIR"
+cd "$PROJECT_DIR"
+# Create src directory
+mkdir -p src
+# Create package.json
+cat > package.json << EOF
+{
+  "name": "$PROJECT_NAME",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@shopify/klint": "^0.0.98",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0"
+  }
+}
+EOF
+# Create vite.config.ts
+cat > vite.config.ts << 'EOF'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+});
+EOF
+# Create tsconfig.json
+cat > tsconfig.json << 'EOF'
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+EOF
+# Create tsconfig.node.json
+cat > tsconfig.node.json << 'EOF'
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+EOF
+# Create index.html
+cat > index.html << 'EOF'
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Klint Editor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+EOF
+# Create src/main.tsx
+cat > src/main.tsx << 'EOF'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+EOF
+# Create src/App.tsx
+cat > src/App.tsx << 'EOF'
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Editor } from "@monaco-editor/react";
+import { useKlint, Klint, type KlintContext } from "@shopify/klint";
+const defaultCode = `
+function preload(K) {
+  console.log(K, "Welcome to Klint Editor! 🎨✨");
+}
+function setup(K) {
+  K.textFont("Inter");
+  K.textSize(64);
+  K.noStroke();
+  K.alignText("center", "middle");
+}
+function draw(K) {
+  K.background('rgba(125, 0, 255, 255)');
+  K.fillColor("#FFF");
+  // Mouse is available directly on K after being extended in preload
+  const mouseX = K.mouse ? K.mouse.x : K.width * 0.5;
+  const mouseY = K.mouse ? K.mouse.y : K.height * 0.5;
+  K.circle(mouseX, mouseY + Math.sin(K.frame * 0.03) * 100, 50);
+}
+`;
+// Define the return type for evaluated user code
+interface UserCode {
+  preload?: (K: KlintContext) => Promise<void> | void;
+  setup?: (K: KlintContext) => void;
+  draw?: (K: KlintContext) => void;
+}
+// Separate Klint Canvas component
+function KlintCanvas({ code }: { code: string }) {
+  const klintHook = useKlint();
+  const { KlintMouse } = klintHook;
+  const mouseHook = KlintMouse();
+  const [error, setError] = useState<string | null>(null);
+  const [isClient, setIsClient] = useState(false);
+  // Set isClient to true after component mounts
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  // Create a sandbox environment with hooks available
+  const createSandbox = useCallback((): UserCode => {
+    try {
+      // Create a mock context for code evaluation (not runtime execution)
+      // The real context will be passed to preload/setup/draw when they're called
+      const sandbox = {
+        K: {
+          // Provide mock mouse hook access for code evaluation
+          useMouse: () => mouseHook,
+          // Add other hooks here as needed
+        },
+        console: console,
+      };
+      // Evaluate the code in the sandbox
+      const userCode = new Function(
+        "K",
+        `
+        "use strict";
+        let userPreload, userSetup, userDraw;
+        // Make hooks available in global scope
+        const useMouse = K.useMouse;
+        // Execute user code
+        ${code}
+        // Return the lifecycle functions
+        return {
+          preload: preload || userPreload,
+          setup: setup || userSetup,
+          draw: draw || userDraw
+        };
+      `
+      );
+      // Execute the code with the sandbox
+      const result = userCode(sandbox.K) as UserCode;
+      setError(null);
+      return result;
+    } catch (err) {
+      console.error("Error evaluating code:", err);
+      setError(err instanceof Error ? err.message : String(err));
+      return { preload: undefined, setup: undefined, draw: undefined };
+    }
+  }, [code, mouseHook]);
+  // Create a ref to hold the evaluated code
+  const userCodeRef = useRef<UserCode | null>(null);
+  // Update the code when it changes
+  useEffect(() => {
+    if (isClient) {
+      userCodeRef.current = createSandbox();
+    }
+  }, [isClient, createSandbox]);
+  const preload = useCallback(
+    async (K: KlintContext) => {
+      // Extend K with mouse data directly
+      K.extend("mouse", mouseHook.mouse);
+      // Add mouse event handlers
+      K.extend("onMouseClick", mouseHook.onClick);
+      K.extend("onMouseIn", mouseHook.onMouseIn);
+      K.extend("onMouseOut", mouseHook.onMouseOut);
+      K.extend("onMouseDown", mouseHook.onMouseDown);
+      K.extend("onMouseUp", mouseHook.onMouseUp);
+      if (userCodeRef.current?.preload) {
+        try {
+          await userCodeRef.current.preload(K);
+        } catch (err) {
+          console.error("Error in preload:", err);
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      }
+    },
+    [mouseHook]
+  );
+  const setup = useCallback((K: KlintContext) => {
+    if (userCodeRef.current?.setup) {
+      try {
+        userCodeRef.current.setup(K);
+      } catch (err) {
+        console.error("Error in setup:", err);
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    }
+  }, []);
+  const draw = useCallback((K: KlintContext) => {
+    if (userCodeRef.current?.draw) {
+      try {
+        userCodeRef.current.draw(K);
+      } catch (err) {
+        console.error("Error in draw:", err);
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    }
+  }, []);
+  if (!isClient) {
+    return (
+      <div style={{ width: "100%", height: "100%", background: "#000" }}></div>
+    );
+  }
+  if (error) {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          background: "#300",
+          color: "#f88",
+          padding: "20px",
+          fontFamily: "monospace",
+          whiteSpace: "pre-wrap",
+        }}
+      >
+        {error}
+      </div>
+    );
+  }
+  return (
+    <Klint
+      context={klintHook.context}
+      preload={preload}
+      setup={setup}
+      draw={draw}
+      options={{
+        origin: "corner",
+        unsafemode: "true",
+      }}
+    />
+  );
+}
+function App() {
+  const [code, setCode] = useState(defaultCode);
+  const [runningCode, setRunningCode] = useState(defaultCode);
+  const [isClient, setIsClient] = useState(false);
+  const [canvasKey, setCanvasKey] = useState(0); // Add a key to force remount
+  // Set isClient to true after component mounts
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  // Function to run code and clear console
+  const runCode = useCallback(() => {
+    // Clear the console before running new code
+    console.clear();
+    setRunningCode(code);
+    // Increment the key to force a complete remount of the KlintCanvas
+    setCanvasKey((prev) => prev + 1);
+  }, [code]);
+  // Function to clear the editor
+  const clearCode = useCallback(() => {
+    setCode("");
+    setRunningCode("");
+    setCanvasKey((prev) => prev + 1);
+  }, []);
+  if (!isClient) {
+    return <div style={{ height: "100vh", background: "#1e1e1e" }}></div>;
+  }
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+      <div style={{ display: "flex", gap: "8px", margin: "8px" }}>
+        <button
+          onClick={runCode}
+          style={{
+            padding: "8px 16px",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+          }}
+        >
+          Run
+        </button>
+        <button
+          onClick={clearCode}
+          style={{
+            padding: "8px 16px",
+            backgroundColor: "#f44336",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+          }}
+        >
+          Clear
+        </button>
+      </div>
+      <div style={{ display: "flex", flex: 1 }}>
+        <div style={{ flex: 1 }}>
+          <Editor
+            height="100%"
+            defaultLanguage="javascript"
+            value={code}
+            onChange={(value) => setCode(value || "")}
+            options={{
+              minimap: { enabled: false },
+              fontSize: 14,
+              theme: "vs-dark",
+            }}
+            onMount={(editor) => {
+              editor.updateOptions({ theme: "vs-dark" });
+            }}
+          />
+        </div>
+        <div style={{ flex: 1, background: "#000" }}>
+          <KlintCanvas key={`${canvasKey}-${runningCode}`} code={runningCode} />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default App;
+EOF
+# Create .gitignore
+cat > .gitignore << 'EOF'
+node_modules
+dist
+.env
+EOF
+echo "✅ Klint editor created successfully!"
+echo ""
+echo "Next steps:"
+echo "  cd $PROJECT_DIR"
+echo "  npm install"
+echo "  npm run dev"
+echo ""
+echo "The editor will be available at http://localhost:5173"

package/bin/create-sandbox ADDED Viewed

@@ -0,0 +1,232 @@
+#!/bin/bash
+# Klint Dev Sandbox Generator
+# Creates a lightweight Vite setup for quick Klint prototyping
+PROJECT_DIR="${1:-.}"
+PROJECT_NAME=$(basename "$PROJECT_DIR")
+echo "🏖️  Creating Klint dev sandbox in $PROJECT_DIR..."
+# Create directory if it doesn't exist
+mkdir -p "$PROJECT_DIR"
+cd "$PROJECT_DIR"
+# Create src directory
+mkdir -p src
+# Create package.json
+cat > package.json << EOF
+{
+  "name": "$PROJECT_NAME",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@shopify/klint": "^0.0.98",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0"
+  }
+}
+EOF
+# Create vite.config.ts
+cat > vite.config.ts << 'EOF'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true
+  }
+});
+EOF
+# Create tsconfig.json
+cat > tsconfig.json << 'EOF'
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+EOF
+# Create tsconfig.node.json
+cat > tsconfig.node.json << 'EOF'
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+EOF
+# Create index.html
+cat > index.html << 'EOF'
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Klint Sandbox</title>
+    <style>
+      body { margin: 0; padding: 0; background: #111; }
+      #root { width: 100vw; height: 100vh; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+EOF
+# Create src/main.tsx
+cat > src/main.tsx << 'EOF'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+EOF
+# Create src/App.tsx with a simple example
+cat > src/App.tsx << 'EOF'
+import { useKlint, Klint } from "@shopify/klint";
+export default function App() {
+  const { context, KlintMouse } = useKlint();
+  const mouse = KlintMouse();
+  const setup = (K: any) => {
+    K.textFont("Inter, sans-serif");
+    K.textSize(48);
+    K.alignText("center", "middle");
+    K.noStroke();
+  };
+  const draw = (K: any) => {
+    // Background with trailing effect
+    K.background("rgba(20, 20, 40, 0.1)");
+    // Mouse-following circle
+    const mouseX = mouse.x || K.width / 2;
+    const mouseY = mouse.y || K.height / 2;
+    // Animated circle
+    K.fillColor("#00ff88");
+    const size = 50 + Math.sin(K.frame * 0.02) * 20;
+    K.circle(mouseX, mouseY, size);
+    // Some text
+    K.fillColor("#ffffff");
+    K.text("Klint Dev Sandbox", K.width / 2, K.height / 2 + 150);
+    K.textSize(24);
+    K.text("Move your mouse around!", K.width / 2, K.height / 2 + 200);
+    // Corner info
+    K.textSize(16);
+    K.alignText("left", "top");
+    K.text(\`Frame: \${K.frame}\`, 20, 20);
+    K.text(\`Mouse: \${Math.round(mouseX)}, \${Math.round(mouseY)}\`, 20, 40);
+  };
+  return (
+    <Klint
+      context={context}
+      setup={setup}
+      draw={draw}
+      options={{
+        origin: "corner"
+      }}
+    />
+  );
+}
+EOF
+# Create .gitignore
+cat > .gitignore << 'EOF'
+node_modules
+dist
+.env
+.DS_Store
+EOF
+# Create README.md
+cat > README.md << 'EOF'
+# Klint Dev Sandbox
+A lightweight development environment for prototyping with Klint.
+## Quick Start
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+## What's included
+- ⚡ Vite for fast hot reload
+- 🎨 Klint pre-configured
+- 🖱️ Mouse interactions ready
+- 📱 Responsive canvas
+## Tips
+- Edit \`src/App.tsx\` to create your sketch
+- Use \`setup(K)\` for initialization
+- Use \`draw(K)\` for your main loop
+- The canvas fills the entire viewport
+- Hot reload updates instantly
+Happy creative coding! 🎨
+EOF
+echo "✅ Klint dev sandbox created successfully!"
+echo ""
+echo "🚀 Quick start:"
+echo "  cd $PROJECT_DIR"
+echo "  npm install"
+echo "  npm run dev"
+echo ""
+echo "The sandbox will open at http://localhost:3000"
+echo "Perfect for quick prototyping and creative experiments! 🎨"