npm - @process.co/element-dev-server - Versions diffs - 0.0.1-test-3 → 0.0.1-test-5 - Mend

@process.co/element-dev-server 0.0.1-test-3 → 0.0.1-test-5

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

package/.process/index.html +27 -0
package/.process/index.tsx +285 -0
package/.process/vite-env.d.ts +18 -0
package/.process/vite.config.cjs +276 -0
package/bin/proc-dev +21 -0
package/package.json +4 -3

package/.process/index.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Process.co Element Dev Server</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    #root {
+      min-height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.tsx"></script>
+</body>
+</html>

package/.process/index.tsx ADDED Viewed

@@ -0,0 +1,285 @@
+import React, { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+// This will be dynamically loaded based on the selected element
+interface ElementComponent {
+  default?: React.ComponentType<any>;
+  [key: string]: any;
+}
+function DevServer() {
+  const [ElementComponent, setElementComponent] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [readonly, setReadonly] = useState(false);
+  const [value, setValue] = useState<any>({});
+  const handleReadonly = () => {
+    setReadonly(!readonly);
+  }
+  useEffect(() => {
+    const loadElement = async () => {
+      try {
+        // Get element path and type from environment variables (passed by CLI)
+        const elementPath = import.meta.env.VITE_ELEMENT_PATH;
+        const elementType = import.meta.env.VITE_ELEMENT_TYPE || 'action';
+        const elementName = import.meta.env.VITE_ELEMENT_NAME;
+        const actionSignalKey = import.meta.env.VITE_ACTION_SIGNAL_KEY;
+        const propertyKey = import.meta.env.VITE_PROPERTY_KEY;
+        const propertyType = import.meta.env.VITE_PROPERTY_TYPE;
+        const propertyUIPath = import.meta.env.VITE_PROPERTY_UI_PATH;
+        const modulePath = import.meta.env.VITE_MODULE_PATH;
+        const uiDirectory = import.meta.env.VITE_UI_DIRECTORY;
+        // console.log('Element data:', {
+        //   elementPath,
+        //   elementType,
+        //   elementName,
+        //   actionSignalKey,
+        //   propertyKey,
+        //   propertyType,
+        //   propertyUIPath,
+        //   modulePath,
+        //   uiDirectory
+        // });
+        // console.log('Using new module path system:', {
+        //   hasModulePath: !!modulePath,
+        //   hasUIDirectory: !!uiDirectory,
+        //   modulePath,
+        //   uiDirectory
+        // });
+        if (!elementPath) {
+          setError('No element path provided. Make sure to run this through the CLI.');
+          setLoading(false);
+          return;
+        }
+        // console.log(`Loading element: ${elementName} (${elementType}) from ${elementPath}`);
+        // debugger;
+        // Use the complete element data from the compatibility module passed via environment variables
+        const elementModule = import.meta.env.VITE_ELEMENT_MODULE || {};
+        const currentActionSignal = import.meta.env.VITE_CURRENT_ACTION_SIGNAL || {};
+        const selectedProperty = import.meta.env.VITE_SELECTED_PROPERTY || {};
+        // console.log('Element module from compatibility:', elementModule);
+        // console.log('Current action/signal:', currentActionSignal);
+        // console.log('Selected property:', selectedProperty);
+        // Get actions and signals from the element module
+        const actions = elementModule.actions || [];
+        const signals = elementModule.signals || [];
+        const action = actions.find((a: any) => a.key === actionSignalKey);
+        const signal = signals.find((s: any) => s.key === actionSignalKey);
+        // console.log('Found action:', action);
+        // console.log('Found signal:', signal);
+        // Use the current action/signal info for UI path
+        let uiPath: string | null = null;
+        if (currentActionSignal && currentActionSignal.ui) {
+          uiPath = `/element-ui/${currentActionSignal.ui}/src/index.tsx`;
+          // console.log('UI path from current action/signal:', uiPath);
+        }
+        // Try to find the component based on type and key
+        let component: any = null;
+        // debugger;
+        // console.log(`Looking for ${elementType} with key: ${actionSignalKey}`);
+        // console.log(`UI Directory from env: ${uiDirectory}`);
+        // console.log(`Current action/signal:`, currentActionSignal);
+        // Check if we have a selected property from the CLI
+        if (selectedProperty && selectedProperty.propertyKey) {
+          // console.log(`Selected property: ${selectedProperty.propertyKey} (${selectedProperty.type})`);
+          if (selectedProperty.type === 'ui-variant' && selectedProperty.uiPath) {
+            // Property has a UI variant - load the UI component
+            uiPath = `/element-ui/${selectedProperty.uiPath}/src/index.tsx`;
+            // console.log(`🎨 Loading property UI component: ${selectedProperty.propertyKey} from ${uiPath}`);
+          } else {
+            // Standard property - use the property data as the component
+            component = selectedProperty.propertyData;
+            // console.log(`📝 Using standard property data for: ${selectedProperty.propertyKey}`, component);
+          }
+        } else if (currentActionSignal && currentActionSignal.ui) {
+          // No specific property selected, but action/signal has UI
+          uiPath = `/element-ui/${currentActionSignal.ui}/src/index.tsx`;
+          // console.log(`🎯 Action/Signal has UI property: ${currentActionSignal.ui}`);
+          // console.log(`🎯 Constructed UI path: ${uiPath}`);
+        } else if (elementType === 'action' && actions && actions.length > 0) {
+          // Fallback to first action
+          const firstAction = actions[0];
+          // console.log(`Using first action: ${firstAction?.key}`, firstAction);
+          if (firstAction && firstAction.ui) {
+            uiPath = `/element-ui/${firstAction.ui}/src/index.tsx`;
+            // console.log(`First action has UI path: ${uiPath}`);
+          }
+        } else if (elementType === 'signal' && signals && signals.length > 0) {
+          // Fallback to first signal
+          const firstSignal = signals[0];
+          // console.log(`Using first signal: ${firstSignal?.key}`, firstSignal);
+          if (firstSignal && firstSignal.ui) {
+            uiPath = `/element-ui/${firstSignal.ui}/src/index.tsx`;
+            // console.log(`First signal has UI path: ${uiPath}`);
+          }
+        }
+        // If we found a UI path, try to load the UI component for the entire action/signal
+        if (uiPath) {
+          try {
+            // console.log(`🎨 Loading UI component for entire ${elementType} from: ${uiPath}`);
+            // console.log(`🔍 UI path type: ${typeof uiPath}`);
+            // console.log(`🔍 UI path length: ${uiPath.length}`);
+            // Import the UI component using the virtual path
+            const uiModule = await import(/* @vite-ignore */ uiPath) as ElementComponent;
+            // console.log(`📦 UI module loaded:`, uiModule);
+            // console.log(`📦 UI module keys:`, Object.keys(uiModule));
+            // console.log(`📦 UI module default:`, uiModule.default);
+            component = uiModule.default || uiModule;
+            // console.log(`✅ Successfully loaded UI component for entire ${elementType}:`, component);
+            // console.log(`✅ Component type:`, typeof component);
+            // console.log(`✅ Component is function:`, typeof component === 'function');
+          } catch (uiError) {
+            console.error('❌ Failed to load UI component:', uiError);
+            console.error('❌ Error details:', {
+              message: uiError.message,
+              stack: uiError.stack,
+              name: uiError.name
+            });
+            // Fallback to the action/signal itself
+            if (actionSignalKey) {
+              const fallbackAction = actions?.find((a: any) => a.key === actionSignalKey);
+              const fallbackSignal = signals?.find((s: any) => s.key === actionSignalKey);
+              component = fallbackAction || fallbackSignal;
+              // console.log(`🔄 Falling back to action/signal metadata:`, component);
+            }
+          }
+        } else if (currentActionSignal) {
+          // No UI path found, fallback to the current action/signal data
+          component = currentActionSignal;
+          // console.log('Using current action/signal as component');
+        }
+        if (component) {
+          setElementComponent(() => component);
+        } else {
+          setError(`No ${elementType} component found in ${elementName}`);
+        }
+      } catch (err) {
+        console.error('Error loading element:', err);
+        setError(`Failed to load element: ${err instanceof Error ? err.message : String(err)}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadElement();
+  }, []);
+  if (loading) {
+    return (
+      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+        <h2>Loading Element...</h2>
+        <p>Please wait while the element is being loaded.</p>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', color: 'red' }}>
+        <h2>Error Loading Element</h2>
+        <p>{error}</p>
+        <p>Check the console for more details.</p>
+      </div>
+    );
+  }
+  if (!ElementComponent) {
+    return (
+      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+        <h2>No Component Found</h2>
+        <p>The selected element doesn't have a renderable component.</p>
+      </div>
+    );
+  }
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+      <h2>Element Development Server</h2>
+      <h3>Rendered Component</h3>
+      <div style={{ marginBottom: '10px' }}>
+        <button
+          onClick={handleReadonly}
+        >
+          {readonly ? 'Make Editable' : 'Make Read Only'}
+        </button>
+      </div>
+      <div style={{ border: '2px solid #007acc', padding: '20px', borderRadius: '8px', backgroundColor: '#f8f9fa' }}>
+        {typeof ElementComponent === 'function' ? (
+          <ElementComponent
+            value={value}
+            onChange={(newValue: any) => setValue(newValue)}
+            onBlur={() => console.log('Component onBlur')}
+            readonly={readonly}
+          />
+        ) : React.isValidElement(ElementComponent) ? (
+          ElementComponent
+        ) : (
+          <div style={{ color: '#666', fontStyle: 'italic' }}>
+            Component is not a valid React component. Type: {typeof ElementComponent}
+            <br />
+            <small>This might be the element metadata instead of the UI component.</small>
+          </div>
+        )}
+      </div>
+      <div style={{ marginBottom: '10px' }}>
+        <h3>Value</h3>
+        <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', overflow: 'auto' }}>
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      </div>
+      <div style={{ border: '1px solid #ccc', padding: '20px', marginTop: '20px', marginBottom: '20px', backgroundColor: '#f8f9fa' }}>
+        <h3>Loaded Component Information</h3>
+        <p><strong>Element:</strong> {import.meta.env.VITE_ELEMENT_NAME}</p>
+        <p><strong>Type:</strong> {import.meta.env.VITE_ELEMENT_TYPE}</p>
+        <p><strong>Action/Signal:</strong> {import.meta.env.VITE_ACTION_SIGNAL_KEY}</p>
+        <p><strong>Module Path:</strong> {import.meta.env.VITE_ELEMENT_PATH}</p>
+        <p><strong>UI Directory:</strong> {import.meta.env.VITE_UI_DIRECTORY || 'Not available'}</p>
+        <h3>Component Details</h3>
+        <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', overflow: 'auto' }}>
+          {JSON.stringify(ElementComponent, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+}
+// Render the app
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<DevServer />);
+}
+export default DevServer;

package/.process/vite-env.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  // readonly VITE_ELEMENT?: string;
+  readonly VITE_ELEMENT_PATH?: string;
+  readonly VITE_ELEMENT_TYPE?: string;
+  readonly VITE_ELEMENT_NAME?: string;
+  readonly VITE_ACTION_SIGNAL_KEY?: string;
+  readonly VITE_PROPERTY_KEY?: string;
+  readonly VITE_PROPERTY_TYPE?: string;
+  readonly VITE_PROPERTY_UI_PATH?: string;
+  readonly VITE_MODULE_PATH?: string;
+  readonly VITE_UI_DIRECTORY?: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/.process/vite.config.cjs ADDED Viewed

@@ -0,0 +1,276 @@
+// process-co/element-dev-server/.process/vite.config.js
+const { defineConfig } = require('vite');
+const react = require('@vitejs/plugin-react');
+const path = require('path');
+const fs = require('fs');
+// Access environment variables passed from CLI
+const elementPath = process.env.VITE_ELEMENT_PATH;
+const elementType = process.env.VITE_ELEMENT_TYPE;
+const elementName = process.env.VITE_ELEMENT_NAME;
+const actionSignalKey = process.env.VITE_ACTION_SIGNAL_KEY;
+const propertyKey = process.env.VITE_PROPERTY_KEY;
+const propertyType = process.env.VITE_PROPERTY_TYPE;
+const propertyUIPath = process.env.VITE_PROPERTY_UI_PATH;
+// console.log('Vite config received:', {
+//   elementPath,
+//   elementType,
+//   elementName,
+//   actionSignalKey,
+//   propertyKey,
+//   propertyType,
+//   propertyUIPath
+// });
+// console.log('Vite config root directory:', __dirname);
+// console.log('Vite config index.html path:', path.resolve(__dirname, 'index.html'));
+// console.log('Vite config index.tsx path:', path.resolve(__dirname, 'index.tsx'));
+module.exports = defineConfig({
+  plugins: [
+    react(),
+    {
+      name: 'element-virtual-modules',
+      resolveId(source) {
+        // Main element module
+        if (source === '/element-main') {
+          // Try to find the main app file
+          const candidates = [
+            path.join(elementPath, `${elementName}.app.mts`),
+            path.join(elementPath, `${elementName}.app.mjs`),
+            path.join(elementPath, 'process_internal.app.mts'),
+            path.join(elementPath, 'process_internal.app.mjs')
+          ];
+          for (const file of candidates) {
+            if (fs.existsSync(file)) return file;
+          }
+        }
+        // Action modules
+        if (source.startsWith('/element-action/')) {
+          const actionKey = source.replace('/element-action/', '');
+          // Look for the action file in the actions directory
+          const actionsDir = path.join(elementPath, 'actions');
+          if (fs.existsSync(actionsDir)) {
+            const subdirs = fs.readdirSync(actionsDir).filter(f => fs.statSync(path.join(actionsDir, f)).isDirectory());
+            for (const subdir of subdirs) {
+              // Try to match the action key
+              if (subdir === actionKey) {
+                // Look for index.ts, index.mts, index.js, index.mjs, or {actionKey}.ts, etc.
+                const candidates = [
+                  path.join(actionsDir, subdir, 'index.ts'),
+                  path.join(actionsDir, subdir, 'index.mts'),
+                  path.join(actionsDir, subdir, 'index.js'),
+                  path.join(actionsDir, subdir, 'index.mjs'),
+                  path.join(actionsDir, subdir, `${subdir}.ts`),
+                  path.join(actionsDir, subdir, `${subdir}.mts`),
+                  path.join(actionsDir, subdir, `${subdir}.js`),
+                  path.join(actionsDir, subdir, `${subdir}.mjs`)
+                ];
+                for (const file of candidates) {
+                  if (fs.existsSync(file)) return file;
+                }
+              }
+            }
+          }
+        }
+        return null;
+      }
+    },
+    {
+      name: 'external-element-loader',
+      configureServer(server) {
+        // Set up file watching for the element directory
+        if (elementPath) {
+          const elementDir = fs.statSync(elementPath).isDirectory()
+            ? elementPath
+            : path.dirname(elementPath);
+          // console.log(`🔍 Setting up file watching for element directory: ${elementDir}`);
+          // Watch the entire element directory for changes
+          server.watcher.add(elementDir);
+          // Set up HMR for external files
+          server.watcher.on('change', (file) => {
+            // console.log(`📝 File changed: ${file}`);
+            // Check if the changed file is in the element directory
+            if (file.startsWith(elementDir)) {
+              // console.log(`🔄 Element file changed: ${file}`);
+              // Trigger HMR for any modules that depend on this file
+              server.moduleGraph.invalidateModule(file);
+              // Notify clients about the change
+              server.ws.send({
+                type: 'update',
+                path: file,
+                timestamp: Date.now()
+              });
+            }
+          });
+        }
+      },
+      resolveId(source, importer) {
+        // console.log(`resolveId called with source: ${source}, importer: ${importer}`);
+        // Handle virtual element paths
+        if (source.startsWith('/')) {
+          const relativePath = source.replace('/element/', '');
+          const fullPath = path.join(elementPath ??'', relativePath);
+          if (fs.existsSync(fullPath)) {
+            // console.log(`Resolving element path: ${source} -> ${fullPath}`);
+            return fullPath;
+          }
+        }
+        // Handle virtual element-ui paths
+        if (source.startsWith('/element-ui/')) {
+          const relativePath = source.replace('/element-ui/', '');
+          const elementDir = fs.statSync(elementPath).isDirectory()
+            ? elementPath
+            : path.dirname(elementPath);
+          const uiDir = path.join(elementDir, 'ui');
+          const fullPath = path.join(uiDir, relativePath);
+          // console.log(`🎨 Trying to resolve element-ui path: ${source} -> ${fullPath}`);
+          // console.log(`🎨 Element path: ${elementPath}, Element dir: ${elementDir}, UI dir: ${uiDir}`);
+          // console.log(`🎨 Relative path: ${relativePath}`);
+          if (fs.existsSync(fullPath)) {
+            // console.log(`✅ Resolving element-ui path: ${source} -> ${fullPath}`);
+            return fullPath;
+          } else {
+            // console.log(`❌ Element-ui path not found: ${fullPath}`);
+            // console.log(`❌ Checking if UI dir exists: ${fs.existsSync(uiDir)}`);
+            // if (fs.existsSync(uiDir)) {
+            //   console.log(`❌ UI dir contents:`, fs.readdirSync(uiDir));
+            // }
+          }
+        }
+        // Handle external element file imports (absolute paths)
+        if (source.startsWith('/') && fs.existsSync(source)) {
+          const stats = fs.statSync(source);
+          if (stats.isFile()) {
+            // console.log(`Resolving external file: ${source}`);
+            return source;
+          } else if (stats.isDirectory()) {
+            // console.log(`Skipping directory in resolveId: ${source}`);
+            return null;
+          }
+        }
+        // Handle relative imports from the element directory
+        if (elementPath && !source.startsWith('/') && !source.startsWith('.')) {
+          const elementDir = fs.statSync(elementPath).isDirectory()
+            ? elementPath
+            : path.dirname(elementPath);
+          const possiblePath = path.join(elementDir, source);
+          if (fs.existsSync(possiblePath)) {
+            // console.log(`Resolving relative import: ${source} -> ${possiblePath}`);
+            return possiblePath;
+          }
+        }
+        return null;
+      },
+      load(id) {
+        // console.log(`load called with id: ${id}`);
+        // Load external files when they're requested
+        if (id.startsWith('/') && fs.existsSync(id)) {
+          const stats = fs.statSync(id);
+          if (stats.isFile()) {
+            const content = fs.readFileSync(id, 'utf-8');
+            // console.log(`Loading external file: ${id}`);
+            return content;
+          } else if (stats.isDirectory()) {
+            // console.log(`Skipping directory: ${id}`);
+            return null;
+          }
+        }
+        // Load files from element directory
+        if (fs.existsSync(id)) {
+          const stats = fs.statSync(id);
+          if (stats.isFile()) {
+            const content = fs.readFileSync(id, 'utf-8');
+            // console.log(`✅ Loading element file: ${id}`);
+            return content;
+          } else {
+            // console.log(`❌ Path exists but is not a file: ${id}`);
+          }
+        } else {
+          // console.log(`❌ Path does not exist: ${id}`);
+        }
+        return null;
+      },
+      handleHotUpdate(ctx) {
+        // Handle HMR for external files
+        const { file, server } = ctx;
+        if (elementPath && file.startsWith(elementPath)) {
+          // console.log(`🔥 HMR triggered for element file: ${file}`);
+          // Invalidate the module in the module graph
+          const module = server.moduleGraph.getModuleById(file);
+          if (module) {
+            server.moduleGraph.invalidateModule(module);
+          }
+          // Return the modules that need to be updated
+          return ctx.modules;
+        }
+        return ctx.modules;
+      }
+    }
+  ],
+  // root is set programmatically in the CLI
+  server: {
+    port: 5173,
+    open: true,
+    host: true,
+    fs: {
+      // Allow serving files from outside the root
+      allow: ['..']
+    },
+    watch: {
+      // Watch external directories for changes
+      ignored: ['**/node_modules/**', '**/dist/**', '**/.git/**'],
+      usePolling: false
+    }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'index.html')
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(process.cwd(), 'src'),
+      // Dynamically map element paths based on the elementPath from CLI
+      ...(elementPath && {
+        // Map the element directory to a virtual path that Vite can resolve
+        '/element': elementPath,
+        // Also map the element's UI directory if it exists
+        '/element-ui': path.join(
+          fs.statSync(elementPath).isDirectory() ? elementPath : path.dirname(elementPath),
+          'ui'
+        )
+      })
+    }
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom']
+  },
+  // Environment variables will be passed programmatically
+});

package/bin/proc-dev ADDED Viewed

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const tsxBin = resolve(__dirname, '../node_modules/.bin/tsx')
+const cliEntry = resolve(__dirname, '../src/cli.tsx')
+// Strip: ["node", "bin/proc-dev", ...args]
+const args = process.argv.slice(2)
+const child = spawn(tsxBin, [cliEntry, ...args], {
+  stdio: 'inherit',
+  env: process.env,
+})
+child.on('exit', (code) => process.exit(code ?? 1))

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@process.co/element-dev-server",
-  "version": "0.0.1-test-3",
+  "version": "0.0.1-test-5",
   "description": "Helper Library for developing elements for Process.co",
   "type": "module",
   "main": "dist/index.js",
@@ -9,12 +9,13 @@
     ".": "./dist/index.js"
   },
   "bin": {
-    "proc-dev": "tsx ./dist/cli.js"
+    "proc-dev": "./bin/proc-dev"
   },
   "files": [
     "dist/*",
     "src/*",
-    "bundle/*"
+    ".process/*",
+    "bin/*"
   ],
   "publishConfig": {
     "access": "public",