native-document 1.0.58 → 1.0.59

package/hrm.js

@@ -1,5 +1,5 @@
-import NdViteHotReload from "./src/hrm/nd-vite-hot-reload.js";
-import transformComponent from "./src/hrm/transformComponent.js";
+import NdViteHotReload from "./src/devtools/hrm/nd-vite-hot-reload.js";
+import transformComponent from "./src/devtools/hrm/transformComponent.js";
 
 export {
     transformComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/{hrm → devtools/hrm}/ComponentRegistry.js

@@ -1,4 +1,4 @@
-import {Anchor} from "../../elements.js";
+import {Anchor} from "../../../elements.js";
 
 const ComponentRegistry = (function() {
     const registry = new Map();
@@ -7,22 +7,25 @@ const ComponentRegistry = (function() {
         const factoryName = factory.name;
 
         return function(...args) {
-            const lastParams = args[0];
-            if(lastParams?.__instance) {
-                const instance = lastParams.__instance;
-                const newInstance = factory(...instance.context.args);
+            const firstParam = args[0];
+            console.log( args)
+            if(firstParam?.__instance) {
+                const instance = firstParam.__instance;
+                const newInstance = factory(...instance.context.args, instance);
                 instance.anchor.setContent(newInstance);
                 return;
             }
-            const instance = factory(...args);
             const anchor = Anchor(factoryName);
-            anchor.setContent(instance);
-            registryItem.instances.add({
+            const instance = {
                 anchor,
                 context: {
-                    args
+                    args,
+                    states: new Map()
                 }
-            });
+            };
+            const factoryInstance = factory(...args, instance);
+            anchor.setContent(factoryInstance);
+            registryItem.instances.add(instance);
             return anchor;
         };
     }
@@ -70,7 +73,7 @@ const ComponentRegistry = (function() {
         },
         updateInstance(instance, newFactory) {
             return newFactory({ __instance: instance });
-        }
+        },
     };
 }());
 

package/src/devtools/hrm/hrm.orbservable.hook.template.js

@@ -0,0 +1,58 @@
+
+function Observable(name, instance, value, ...args) {
+    if(instance.context.states.has(name)) {
+        const item =  instance.context.states.get(name);
+        if(item.value !== value) {
+            item.value = value;
+            item.observable.set(value);
+        }
+        return item.observable;
+    }
+
+    const observable = __OriginalObservable__(value, ...args);
+    instance.context.states.set(name, {
+        observable,
+        value
+    });
+    return observable;
+};
+
+Observable.init = function(name, instance, value, ...args) {
+    if(instance.context.states.has(name)) {
+        const item = instance.context.states.get(name);
+
+        if(item.value !== JSON.stringify(value)) {
+            item.value = value;
+            item.observable.set(value);
+        }
+
+        return item.observable;
+    }
+    const item = __OriginalObservable__.init(value, ...args);
+    instance.context.states.set(name, {
+        item,
+        value: JSON.stringify(value)
+    });
+    return item;
+};
+
+Observable.array = function(name, instance, value, ...args) {
+    if(instance.context.states.has(name)) {
+        const item = instance.context.states.get(name);
+        if(item.value !== JSON.stringify(value)) {
+            item.value = value;
+            item.observable.set(value);
+        }
+        return item.observable;
+    }
+    const item = __OriginalObservable__.array(value, ...args);
+    instance.context.states.set(name, {
+        item,
+        value: JSON.stringify(value)
+    });
+    return item;
+};
+
+Observable.object = Observable.init;
+Observable.json = Observable.init;
+const $ = Observable;

package/src/devtools/hrm/transformComponent.js

@@ -0,0 +1,129 @@
+import fs from 'node:fs';
+import path from 'node:path';
+// import { parse } from '@babel/parser';
+import MagicString from 'magic-string';
+
+import { fileURLToPath } from 'node:url';
+import { parse } from '@babel/parser';
+import { default as traverse } from '@babel/traverse';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const renameImportedObservables = (content, match) => {
+    let isObservableFound = false;
+    let isObservableShortFound = false;
+    const transformedContentArray = match.split(',').map(item => {
+        let trimmed = item.trim();
+
+        if (trimmed === 'Observable') {
+            isObservableFound = true;
+            return 'Observable as __OriginalObservable__';
+        }
+        if (trimmed === '$') {
+            isObservableShortFound = true;
+            return '$ as __$__';
+        }
+
+        return ` ${trimmed}`;
+    });
+    if(!isObservableFound && isObservableShortFound) {
+        transformedContentArray.push('Observable as __OriginalObservable__')
+    }
+    const transformedContent = transformedContentArray.join(', ');
+
+    return `import {${transformedContent} } from 'native-document'`;
+};
+
+function transformObservableImports(code, params) {
+    const renameImportationCode = code.replace(/import\s+\{([^}]+?)\}\s+from\s+['"]native-document['"]/g, renameImportedObservables);
+    const isRenamed = renameImportationCode !== code;
+
+    const s = new MagicString(renameImportationCode);
+    if(isRenamed) {
+        //Todo: move this code outside the function
+        const hrmObservableHookTemplate = fs.readFileSync(__dirname + '/hrm.orbservable.hook.template.js', 'utf8');
+        s.append(template(
+            hrmObservableHookTemplate,
+            params ?? {}
+        ));
+    }
+
+    return s.toString();
+}
+
+function transformObservableDeclarations(code) {
+    const regex = /const\s+(\w+)\s*=\s*(\$|Observable)(\.(?:init|array|json))?\s*\(/g;
+
+    return code.replace(regex, (match, varName, caller, method) => {
+        const obsName = method ? `${caller}${method}` : 'Observable';
+        return `console.log(arguments); const ${varName} = ${obsName}('${varName}', arguments[arguments.length - 1], `;
+    });
+}
+
+function template(code, params) {
+    let codeFormatted = code;
+    for(const key in params) {
+        codeFormatted = codeFormatted.replace(new RegExp("\\$\{"+key+"}", 'ig'), params[key]);
+    }
+    return codeFormatted;
+}
+
+export default function transformComponent(id, code, options) {
+    let hasDefaultExport = false;
+    let componentName = null;
+    let exportStart = 0;
+    let exportEnd = 0;
+    // TODO: move this line outside the function
+    const hrmHookTemplate = fs.readFileSync(__dirname + '/hrm.hook.template.js', 'utf8');
+    const formattedCode = transformObservableDeclarations(
+        transformObservableImports(code, { id, ...options }),
+    );
+    const s = new MagicString(formattedCode);
+    const codeParsed = parse(formattedCode, {
+        sourceType: 'module',
+        plugins: []
+    });
+
+    traverse.default(codeParsed, {
+        ExportDefaultDeclaration(path) {
+            hasDefaultExport = true;
+            const declaration = path.node.declaration;
+
+            if (declaration.id) {
+                componentName = declaration.id.name;
+            } else if (declaration.type === 'Identifier') {
+                componentName = declaration.name;
+            } else {
+                componentName = 'AnonymousComponent';
+            }
+
+            exportStart = path.node.start;
+            exportEnd = path.node.end;
+        },
+    });
+    if (!hasDefaultExport) {
+        return null;
+    }
+
+    const originalExport = formattedCode.slice(exportStart, exportEnd);
+    const hrmComponentName = `__HRM_${componentName}__`;
+    const newExport = originalExport.replace(
+        'export default',
+        `const ${hrmComponentName} =`
+    );
+    s.overwrite(exportStart, exportEnd, newExport);
+
+    const hrmHookTemplateFormatted = template(hrmHookTemplate, {
+        id
+    });
+
+    s.prepend('import ComponentRegistry from "native-document/src/hrm/ComponentRegistry";');
+    s.append(`export default ComponentRegistry.register('${id}', ${hrmComponentName}, { preserveState: ${options.preserveState} });`);
+    s.append(hrmHookTemplateFormatted);
+
+    return {
+        code: s.toString(),
+        map: s.generateMap({ source: id, hires: true })
+    };
+}

package/src/hrm/transformComponent.js

@@ -1,72 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-// import { parse } from '@babel/parser';
-import MagicString from 'magic-string';
-
-import { fileURLToPath } from 'node:url';
-import { parse } from '@babel/parser';
-import { default as traverse } from '@babel/traverse';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-
-export default function transformComponent(id, code, options) {
-    let hasDefaultExport = false;
-    let componentName = null;
-    let exportStart = 0;
-    let exportEnd = 0;
-    // TODO: move this line outside the function
-    const hrmHookTemplate = fs.readFileSync(__dirname + '/hrm.hook.template.js', 'utf8');
-    const s = new MagicString(code);
-    const codeParsed = parse(code, {
-        sourceType: 'module',
-        plugins: []
-    });
-
-    traverse.default(codeParsed, {
-        ExportDefaultDeclaration(path) {
-            hasDefaultExport = true;
-            const declaration = path.node.declaration;
-
-            if (declaration.id) {
-                componentName = declaration.id.name;
-            } else if (declaration.type === 'Identifier') {
-                componentName = declaration.name;
-            } else {
-                componentName = 'AnonymousComponent';
-            }
-
-            exportStart = path.node.start;
-            exportEnd = path.node.end;
-        }
-    });
-    if (!hasDefaultExport) {
-        return null;
-    }
-
-    const originalExport = code.slice(exportStart, exportEnd);
-    const hrmComponentName = `__HRM_${componentName}__`;
-    const newExport = originalExport.replace(
-        'export default',
-        `const ${hrmComponentName} =`
-    );
-    s.overwrite(exportStart, exportEnd, newExport);
-
-    const data = {
-        id: id,
-    };
-    let hrmHookTemplateFormatted = hrmHookTemplate;
-    for(const key in data) {
-        hrmHookTemplateFormatted = hrmHookTemplateFormatted.replace(new RegExp("\\$\{"+key+"}", 'ig'), data[key]);
-    }
-
-    s.prepend('import ComponentRegistry from "native-document/src/hrm/ComponentRegistry";');
-    s.append(`export default ComponentRegistry.register('${id}', ${hrmComponentName}, { preserveState: ${options.preserveState} });`);
-    s.append(hrmHookTemplateFormatted);
-
-    return {
-        code: s.toString(),
-        map: s.generateMap({ source: id, hires: true })
-    };
-}