@webjourney/vite-plugins 1.0.0

package/README.md

@@ -0,0 +1,56 @@
+# @webjourney/vite-plugins
+
+Vite plugins for Webjourney WYSIWYG editing functionality.
+
+## Installation
+
+```bash
+yarn add @webjourney/vite-plugins
+```
+
+## Usage
+
+In your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import { webjourneyPlugins } from '@webjourney/vite-plugins';
+
+export default defineConfig({
+  plugins: [
+    ...webjourneyPlugins(), // Must run BEFORE react() to see original JSX
+    // ... other plugins
+  ],
+});
+```
+
+## What it does
+
+This package provides Vite plugins that enable WYSIWYG editing in Webjourney:
+
+1. **`webjourneyElementTagger()`** - Injects source mapping attributes (`data-wj-*`) into JSX elements for tracking
+2. **`webjourneyPluginScript()`** - Injects the Webjourney plugin script into the HTML head
+3. **`webjourneyPlugins()`** - Convenience function that returns an array of the above plugins
+
+## Features
+
+- Automatically adds `data-wj-file`, `data-wj-line`, `data-wj-type`, and `data-wj-id` attributes to text and image elements
+- Only runs in development mode for performance
+- Zero runtime overhead in production builds
+
+## Development
+
+```bash
+# Build the package
+yarn build
+
+# Watch mode
+yarn dev
+
+# Type check
+yarn typecheck
+```
+
+## License
+
+Private - Webjourney internal use only

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export declare function webjourneyElementTagger(): {
+    name: string;
+    enforce: "pre";
+    transform(code: string, id: string): {
+        code: any;
+        map: null;
+    } | null;
+};
+export declare function webjourneyPluginScript(): {
+    name: string;
+    enforce: "pre";
+    transformIndexHtml(html: string): string;
+};
+export declare function webjourneyPlugins(): {
+    name: string;
+    enforce: "pre";
+    transformIndexHtml(html: string): string;
+}[];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,wBAAgB,uBAAuB;;;oBAKnB,MAAM,MAAM,MAAM;;;;EAkIrC;AAED,wBAAgB,sBAAsB;;;6BAKT,MAAM;EAIlC;AAED,wBAAgB,iBAAiB;;;6BANJ,MAAM;IAUlC"}

package/dist/index.js

@@ -0,0 +1,111 @@
+import path from 'path';
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import _generate from '@babel/generator';
+import * as t from '@babel/types';
+// Handle CommonJS default exports
+const traverse = _traverse.default || _traverse;
+const generate = _generate.default || _generate;
+// Use local plugin for development, production URL for deployed sites
+const webjourneyPluginScriptHost = process.env.NODE_ENV === 'production'
+    ? 'https://app.webjourney.pro'
+    : 'http://127.0.0.1:3000';
+// Plugin to inject source mapping attributes for WYSIWYG editing
+export function webjourneyElementTagger() {
+    return {
+        name: 'webjourney-source-mapping',
+        enforce: 'pre',
+        transform(code, id) {
+            // Only process React components in development
+            if (process.env.NODE_ENV === 'production')
+                return null;
+            if (!id.match(/\.(tsx|jsx)$/))
+                return null;
+            if (id.includes('node_modules'))
+                return null;
+            // Get relative path from project root
+            const relativePath = path.relative(process.cwd(), id);
+            try {
+                // Parse the code into an AST
+                const ast = parse(code, {
+                    sourceType: 'module',
+                    plugins: ['typescript', 'jsx'],
+                });
+                let modified = false;
+                // Traverse the AST
+                traverse(ast, {
+                    JSXElement(path) {
+                        const openingElement = path.node.openingElement;
+                        const elementName = openingElement.name;
+                        // Only process specific element types
+                        if (!t.isJSXIdentifier(elementName))
+                            return;
+                        const tagName = elementName.name;
+                        // Check if already has data-wj-file attribute
+                        const hasDataWj = openingElement.attributes.some((attr) => t.isJSXAttribute(attr) &&
+                            t.isJSXIdentifier(attr.name) &&
+                            attr.name.name === 'data-wj-file');
+                        if (hasDataWj)
+                            return;
+                        const lineNumber = openingElement.loc?.start.line ?? 0;
+                        // Handle text elements
+                        if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'button', 'a', 'label', 'li'].includes(tagName)) {
+                            // Check if element has text content
+                            const hasTextContent = path.node.children.some((child) => t.isJSXText(child) && child.value.trim() !== '');
+                            if (hasTextContent) {
+                                // Generate unique ID: filename:line
+                                const elementId = `${relativePath}:${lineNumber}`;
+                                openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('data-wj-file'), t.stringLiteral(relativePath)), t.jsxAttribute(t.jsxIdentifier('data-wj-line'), t.stringLiteral(String(lineNumber))), t.jsxAttribute(t.jsxIdentifier('data-wj-type'), t.stringLiteral('text')), t.jsxAttribute(t.jsxIdentifier('data-wj-id'), t.stringLiteral(elementId)));
+                                modified = true;
+                            }
+                        }
+                        // Handle img elements
+                        if (tagName === 'img') {
+                            // Check if img has src attribute
+                            const hasSrc = openingElement.attributes.some((attr) => t.isJSXAttribute(attr) &&
+                                t.isJSXIdentifier(attr.name) &&
+                                attr.name.name === 'src');
+                            if (hasSrc) {
+                                // Generate unique ID: filename:line
+                                const elementId = `${relativePath}:${lineNumber}`;
+                                openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('data-wj-file'), t.stringLiteral(relativePath)), t.jsxAttribute(t.jsxIdentifier('data-wj-line'), t.stringLiteral(String(lineNumber))), t.jsxAttribute(t.jsxIdentifier('data-wj-type'), t.stringLiteral('image')), t.jsxAttribute(t.jsxIdentifier('data-wj-id'), t.stringLiteral(elementId)));
+                                modified = true;
+                            }
+                        }
+                    }
+                });
+                if (modified) {
+                    // Generate code from the modified AST
+                    const output = generate(ast, {
+                        retainLines: true,
+                        compact: false,
+                    });
+                    return {
+                        code: output.code,
+                        map: null,
+                    };
+                }
+                return null;
+            }
+            catch (error) {
+                console.error(`Error transforming ${id}:`, error);
+                return null;
+            }
+        }
+    };
+}
+export function webjourneyPluginScript() {
+    return {
+        name: 'webjourney-plugin-script',
+        enforce: 'pre',
+        transformIndexHtml(html) {
+            return html.replace('</head>', `<script src="${webjourneyPluginScriptHost}/plugins/plugin.iife.js"></script></head>`);
+        }
+    };
+}
+export function webjourneyPlugins() {
+    return [
+        // webjourneyElementTagger(),
+        webjourneyPluginScript()
+    ];
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@webjourney/vite-plugins",
+  "version": "1.0.0",
+  "description": "Vite plugins for Webjourney WYSIWYG editing",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.26.5",
+    "@babel/parser": "^7.26.5",
+    "@babel/traverse": "^7.26.5",
+    "@babel/types": "^7.26.5"
+  },
+  "devDependencies": {
+    "@types/babel__generator": "^7.6.8",
+    "@types/babel__traverse": "^7.20.6",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.0"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0"
+  }
+}