native-document 1.0.94 → 1.0.98

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

@@ -1,5 +1,5 @@
-import {Anchor} from "../../../elements";
-import Validator from "../../core/utils/validator";
+import {Anchor} from "../elements";
+import Validator from "../src/core/utils/validator";
 
 const ComponentRegistry = (function() {
     const registry = new Map();

package/devtools/index.js

@@ -0,0 +1,8 @@
+import NdViteDevtools from "./transformers/nd-vite-devtools.js";
+import transformComponentForHrm from "./transformers/src/transformComponentForHrm.js";
+
+export {
+    transformComponentForHrm,
+    NdViteDevtools,
+};
+

package/{src/devtools/plugin.js → devtools/plugin/dev-tools-plugin.js}

@@ -6,10 +6,10 @@ export const DevToolService = {
 
 
 export const DevToolsPlugin = {
+    $name: 'DevTools',
     name: 'DevTools',
     onCreateObservable(observable) {
         DevToolService.createdObservable.set((last) => ++last);
-        console.log('Création Capturé', observable);
+        console.log('Création Capturé', observable.$value);
     }
-
 };

package/{src/devtools/hrm/nd-vite-hot-reload.js → devtools/transformers/nd-vite-devtools.js}

@@ -1,19 +1,24 @@
-// vite-plugin-native-document-hmr.js
-import transformComponent from "./transformComponent.js";
+import Fs from 'node:fs'
+import transformComponentForHrm from "./src/transformComponentForHrm.js";
+import {isFileMustBeModified} from "./src/utils.js";
+import transformJsFile from "./src/transformJsFile.js";
 
-export default function NdViteHotReload(options) {
+export default function NdViteDevtools(options) {
     const {
         include = /\.nd\.js$/,
         preserveState = true
     } = options;
 
     return {
-        name: 'vite-plugin-native-document-hmr',
+        name: 'nd-devtools',
         apply: 'serve',
         enforce: 'post',
 
         handleHotUpdate({ file, server, modules }) {
             if (!include.test(file)) {
+                if(isFileMustBeModified(file)) {
+                    return modules.filter(Boolean);
+                }
                 return;
             }
 
@@ -28,11 +33,16 @@ export default function NdViteHotReload(options) {
             return modules.filter(Boolean);
         },
         transform(code, id) {
-            if (!include.test(id)) return null;
+            if (!include.test(id)) {
+                if(isFileMustBeModified(id)) {
+                    return transformJsFile(id, code, { preserveState });
+                }
+                return null;
+            }
             if (id.includes('node_modules')) return null;
 
             try {
-                return transformComponent(id, code, { preserveState });
+                return transformComponentForHrm(id, code, { preserveState });
             } catch (error) {
                 console.error(`[NativeDocument] Transform error in ${id}:`, error);
                 return null;

package/devtools/transformers/src/transformComponentForHrm.js

@@ -0,0 +1,74 @@
+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';
+
+import { transformObservableImports, transformObservableDeclarations, template } from './utils.js';
+
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+export default function transformComponentForHrm(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 + '/../templates/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/devtools/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/devtools/transformers/src/transformJsFile.js

@@ -0,0 +1,9 @@
+import {transformObservableDeclarations, transformObservableImports} from "./utils.js";
+
+
+export default function transformJsFile(id, code, options) {
+
+    return transformObservableDeclarations(
+        transformObservableImports(code, { id, ...options }),
+    );
+}

package/devtools/transformers/src/utils.js

@@ -0,0 +1,79 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import MagicString from 'magic-string';
+
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export function template(code, params) {
+    let codeFormatted = code;
+    for(const key in params) {
+        codeFormatted = codeFormatted.replace(new RegExp("\\$\{"+key+"}", 'ig'), params[key]);
+    }
+    return codeFormatted;
+}
+
+export function 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'`;
+}
+
+export 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 + '/../templates/hrm.orbservable.hook.template.js', 'utf8');
+        s.append(template(
+            hrmObservableHookTemplate,
+            params ?? {}
+        ));
+    }
+
+    return s.toString();
+}
+
+export function transformObservableDeclarations(code) {
+    const regex = /(const|let|var)\s+([\w$]+)\s*=\s*(\$|Observable)(\.(?:init|array|json))?\s*\(/g;
+
+    return code.replace(regex, (match, varType, varName, caller, method) => {
+        const obsName = method ? `${caller}${method}` : 'Observable';
+        return `${varType} ${varName} = ${obsName}('${varName}', arguments[arguments.length - 1], `;
+    });
+}
+
+export function isFileMustBeModified(file) {
+    if(!/labs\/live\/src/.test(file)) {
+        return false;
+    }
+    const content = fs.readFileSync(file, 'utf-8');
+    const isContainObservableImport = /import\s+\{([^}]+?)\}\s+from\s+['"]native-document['"]/g.test(content);
+    if(isContainObservableImport) {
+        return true;
+    }
+    return /(const|let|var)\s+([\w$]+)\s*=\s*(\$|Observable)(\.(?:init|array|json))?\s*\(/g.test(content);
+}

package/devtools/widget/Widget.js

@@ -0,0 +1,48 @@
+import {Observable} from "../../index";
+import {Button, Div, ShowIf, Switch} from "../../elements";
+import './widget.css';
+
+export default function Widget() {
+
+    const $isNotMinimize = Observable(false);
+    const $isMaximize = Observable(false);
+
+    const toggleMinimize = () => {
+        $isNotMinimize.toggle();
+    }
+    const toggleMaximize = () => {
+        $isNotMinimize.set(true);
+        $isMaximize.toggle();
+    }
+    const close = () => {}
+
+
+    return Div({
+        class: {
+            'nd-dev-tools-widget': true,
+            'nd-dev-tools-widget-maximize': $isMaximize,
+            'nd-dev-tools-widget-not-minimize': $isNotMinimize,
+        }
+        },
+        [
+            Div({ class: 'nd-dev-tools-widget-header'},[
+                Switch(
+                    $isNotMinimize,
+                    Div({ class: 'nd-dev-tools-widget-header-title'}, 'DevTools'),
+                    Div({ class: 'nd-dev-notification-badge' }, 100)
+                ),
+                Div({ class: 'nd-dev-tools-widget-header-options'}, [
+                    Button({ class: 'nd-dev-tools-widget-header-option btn-close'}).nd.onClick(close),
+                    Button({ class: 'nd-dev-tools-widget-header-option btn-maximize'}).nd.onClick(toggleMaximize),
+                    Button({ class: 'nd-dev-tools-widget-header-option btn-minimize'}).nd.onClick(toggleMinimize),
+                ])
+            ]),
+            ShowIf(
+                $isNotMinimize,
+                Div({ class: 'nd-dev-tools-widget-content'}, [
+                    'Show me sometghings'
+                ])
+            )
+        ]
+    );
+}

package/devtools/widget/widget.css

@@ -0,0 +1,81 @@
+:root {
+    --nd-dev-background: #16181f;
+    --nd-dev-text-color: #e2e8f0;
+}
+
+
+.nd-dev-tools-widget {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    background: var(--nd-dev-background);
+    color: var(--nd-dev-text-color);
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    min-width: 100px;
+    min-height: unset;
+    z-index: 2147483647;
+    &.nd-dev-tools-widget-not-minimize {
+        min-width: 300px;
+        min-height: 200px;
+        &.nd-dev-tools-widget-maximize {
+            width: calc(100dvw - 10px*2);
+            height: calc(100dvh - 10px*2);
+        }
+    }
+}
+.nd-dev-tools-widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5rem 1.5rem;
+    column-gap: 3rem;
+    cursor: move;
+}
+.nd-dev-notification-badge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background-color: #ff5f57;
+    font-size: .75rem;
+}
+
+.nd-dev-tools-widget-header-title {
+
+}
+
+.nd-dev-tools-widget-header-options {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    column-gap: 5px;
+}
+
+.nd-dev-tools-widget-header-option {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    &.btn-close {
+        background-color: #ff5f57
+    }
+    &.btn-minimize {
+        background-color: #febc2e;
+    }
+    &.btn-maximize {
+        background-color: #28c840;
+    }
+    &:hover {
+        box-shadow: 0 0 0 2px #fff;
+    }
+}
+
+.nd-dev-tools-widget-content {
+    padding: .5rem;
+}

package/devtools/widget.js

@@ -0,0 +1,23 @@
+import Widget from './widget/Widget';
+import {PluginsManager} from "../index";
+import { DevToolsPlugin } from "./plugin/dev-tools-plugin";
+
+PluginsManager.add(DevToolsPlugin, 'Devtools');
+
+const Devtools = (function () {
+
+    return {
+        config() {
+            console.log('devtool init configuratzion');
+        },
+        rootApp() {
+
+        },
+        init() {
+            const app = Widget();
+            document.body.parentNode.appendChild(app);
+        },
+    }
+}());
+
+export default Devtools;