native-document 1.0.269 → 1.0.271

package/devtools/ComponentRegistry.js

@@ -4,6 +4,7 @@ import DebugManager from "../src/core/utils/debug-manager";
 
 const ComponentRegistry = (function() {
     const registry = new Map();
+    const timerRegistry = new Map();
 
     const attachLocalExtensions = (instance, factoryInstance) => {
         if(!factoryInstance.$localExtensions) {
@@ -47,12 +48,14 @@ const ComponentRegistry = (function() {
             }
             const anchor = Anchor(factoryName);
             const instance = {
+                __hrm: true,
                 anchor,
+                id,
                 extensions: null,
                 context: {
                     args,
                     states: new Map()
-                }
+                },
             };
             const factoryInstance = factory(...args, instance);
             anchor.setContent(factoryInstance);
@@ -61,7 +64,7 @@ const ComponentRegistry = (function() {
             attachLocalExtensions(instance, factoryInstance);
             return anchor;
         };
-    }
+    };
 
     return {
         /**
@@ -76,12 +79,12 @@ const ComponentRegistry = (function() {
                     instances: new Set(),
                     metadata,
                     states: {},
-                    version: 0
+                    version: 0,
                 });
             }
             return wrapper(id, factory, metadata, registry.get(id));
         },
-        update(id, newFactory) {
+        update(id, newFactory, globalId) {
             const component = registry.get(id);
             if(!component) {
                 DebugManager.warn(`[HMR] Component ${id} not found`);
@@ -107,6 +110,25 @@ const ComponentRegistry = (function() {
         updateInstance(instance, newFactory) {
             return newFactory({ __instance: instance });
         },
+        registerTimer(id, timerId, cleaner) {
+            const timers = timerRegistry.get(id);
+            console.log({ timers, id, cleaner })
+            if (!timers) {
+                timerRegistry.set(id, [{timerId, cleaner}]);
+                return;
+            }
+            timers.push({ timerId, cleaner });
+        },
+        cleanTimer(id) {
+            const timers = timerRegistry.get(id);
+            console.log({ timers });
+            if (!timers) {
+                return;
+            }
+            for(const item in timers) {
+                item.cleaner(item.timerId);
+            }
+        },
     };
 }());
 

package/devtools/index.js

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

package/devtools/{transformers/nd-vite-devtools.js → nd-vite-devtools.js}

@@ -1,11 +1,13 @@
-import transformComponentForHrm from "./src/transformComponentForHrm.js";
-import {isFileMustBeModified} from "./src/utils.js";
-import transformJsFile from "./src/transformJsFile.js";
+// import transformComponentForHrm from "./_old/transformers/src/transformComponentForHrm.js";
+import {isFileMustBeModified} from './src/utils.js';
+import transformForHrm from './src/transformers/transformForHrm.js';
+import transformNdForHrm from './src/transformers/transformNdForHrm.js';
+// import transformJsFile from "./_old/transformers/src/transformJsFile.js";
 
 export default function NdViteDevtools(options) {
     const {
         include = /\.nd\.js$/,
-        preserveState = true
+        preserveState = true,
     } = options;
 
     return {
@@ -25,7 +27,7 @@ export default function NdViteDevtools(options) {
             server.ws.send({
                 type: 'nd-hmr-file',
                 event: 'nd:update',
-                data: { file, msg: 'The content has changed' }
+                data: { file, msg: 'The content has changed' },
             });
 
             // We will manage all manually
@@ -34,14 +36,16 @@ export default function NdViteDevtools(options) {
         transform(code, id) {
             if (!include.test(id)) {
                 if(isFileMustBeModified(id)) {
-                    return transformJsFile(id, code, { preserveState });
+                    return transformForHrm(code, id, { preserveState, ...options});
                 }
                 return null;
             }
-            if (id.includes('node_modules')) return null;
+            if (id.includes('node_modules')) {
+                return null;
+            }
 
             try {
-                return transformComponentForHrm(id, code, { preserveState });
+                return transformNdForHrm(code, id, { preserveState, ...options });
             } catch (error) {
                 console.error(`[NativeDocument] Transform error in ${id}:`, error);
                 return null;
@@ -50,6 +54,6 @@ export default function NdViteDevtools(options) {
 
         configResolved() {
             console.log('[NativeDocument] HMR Plugin loaded ✓');
-        }
+        },
     };
 }

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

@@ -0,0 +1,56 @@
+
+if (import.meta.hot) {
+    const componentIds = ${componentIds};
+    import.meta.hot.accept((newModule) => {
+        // console.log('[HMR Browser] Update accepted for ${id}');
+
+        if (!newModule) {
+            // console.error('[HMR Browser] newModule is undefined!');
+            return;
+        }
+
+        try {
+            if (typeof window === 'undefined') {
+                // console.error('[HMR Browser] window is undefined!');
+                return;
+            }
+        } catch (e) {
+            return;
+        }
+
+        if (!ComponentRegistry) {
+            // console.error('[HMR Browser] ComponentRegistry not found!');
+            return;
+        }
+
+        // console.log('[HMR Browser] Calling ComponentRegistry.update()');
+        try {
+            for(const componentId of componentIds) {
+                ComponentRegistry.cleanTimer(componentId);
+            }
+            ComponentRegistry.cleanTimer('${id}')
+
+            for(const componentId of componentIds) {
+                // console.log('[HMR Browser] ComponentId : '+componentId);
+                ComponentRegistry.update(componentId, newModule.default, '${id}');
+            }
+            ComponentRegistry.update('${id}', newModule.default, '${id}');
+            // console.log('[HMR Browser] ✓ Update successful');
+        } catch (error) {
+            // console.error('[HMR Browser] ✗ Update failed:', error);
+        }
+    });
+
+    import.meta.hot.on('vite:error', (payload) => {
+        console.error('[HMR Browser] Vite error:', payload);
+    });
+
+
+    import.meta.hot.on('nd:update', (payload) => {
+        console.error('[HMR Browser] ND:Update:', payload);
+    });
+
+    import.meta.hot.dispose(() => {
+        console.log('[HMR Browser] Disposing ${id}');
+    });
+}

package/devtools/src/transformers/timerSourceCode.js

@@ -0,0 +1,22 @@
+
+
+export const timerSourceCode = () => {
+
+    return 'const customSetTimeout = (contextId, targetId, , callback, delay, ...args) => {\n' +
+    '    const timerId = window.setTimeout(callback, delay, ...args)' +
+    '    ComponentRegistry.registerTimer(contextId, timerId, clearTimeout);\n' +
+    '    return timerId;\n' +
+    '};\n' +
+    '\n' +
+    'const setTimeout = customSetTimeout;',
+    '\n',
+    '\n',
+    'const customSetInterval = (contextId, targetId, callback, delay, ...args) => {\n' +
+    'console.log({ targetId, callback, delay })\n' +
+    '    const timerId = window.setInterval(callback, delay, ...args);\n' +
+    '    ComponentRegistry.registerTimer(contextId, timerId, clearInterval);\n' +
+    '    return timerId\n' +
+    '};\n' +
+    '\n' +
+    'const setInterval = customSetInterval;';
+};

package/devtools/src/transformers/transformForHrm.js

@@ -0,0 +1,158 @@
+import {template, transformObservableDeclarations, transformObservableImports} from '../utils.js';
+import { parse } from '@babel/parser';
+import { default as traverse } from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+import fs from 'node:fs';
+import {fileURLToPath} from 'node:url';
+import path from 'node:path';
+import {timerSourceCode} from './timerSourceCode.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default function transformForHrm(code, id, options = {}) {
+
+    let output = transformObservableImports(code);
+    output = transformObservableDeclarations(output, id);
+
+    const hrmHookTemplate = fs.readFileSync(__dirname + '/../templates/hrm.hook.template.js', 'utf8');
+
+    const codeParsed = parse(output, {
+        sourceType: 'module',
+        plugins: [],
+    });
+
+    const componentIds = [];
+
+
+    traverse.default(codeParsed, {
+        FunctionDeclaration(path) {
+            if(!path.node.id || path.node.__isWrapped) {
+                return;
+            }
+            const fnName = path.node.id.name;
+            if(!/^[A-Z]/.test(fnName)) {
+                return;
+            }
+            const componentId = `${id}::${fnName}`;
+            componentIds.push(componentId);
+
+            const wrappedCall = t.callExpression(
+                t.memberExpression(
+                    t.identifier('ComponentRegistry'),
+                    t.identifier('register')
+                ),
+                [
+                    t.stringLiteral(componentId),
+                    t.functionExpression(
+                        t.identifier(fnName),
+                        path.node.params,
+                        path.node.body,
+                    ),
+                ]
+            );
+
+            // Cas — export default function HomePage() {}
+            if(path.parent.type === 'ExportDefaultDeclaration') {
+                // Remplacer uniquement la déclaration par l'expression wrappée
+                path.replaceWith(wrappedCall);
+                path.skip();
+                return;
+            }
+
+            // Cas — function HomePage() {}
+            const varDeclaration = t.variableDeclaration('const', [
+                t.variableDeclarator(t.identifier(fnName), wrappedCall),
+            ]);
+
+            path.replaceWith(varDeclaration);
+            // path.skip();
+        },
+        VariableDeclarator(path) {
+            const init = path.node.init;
+            const isFunction = init && (init.type === 'ArrowFunctionExpression' || init.type === 'FunctionExpression');
+
+            if (!(isFunction && path.node.id.type === 'Identifier')) {
+                return;
+            }
+            const fnName = path.node.id.name;
+            const isComponent = /^[A-Z]/.test(fnName);
+            if (!isComponent) {
+                return;
+            }
+            if(init.__isWrapped) {
+                return;
+            }
+            const componentId = `${id}::${fnName}`;
+            componentIds.push(componentId);
+
+            const wrappedCall = t.callExpression(
+                t.memberExpression(
+                    t.identifier('ComponentRegistry'),
+                    t.identifier('register')
+                ),
+                [
+                    t.stringLiteral(componentId),
+                    init,
+                ],
+            );
+
+            wrappedCall.__isWrapped = true;
+            path.node.init = wrappedCall;
+            // path.skip();
+        },
+        CallExpression(path) {
+            const callee = path.node.callee;
+
+            if (t.isIdentifier(callee) && ['setInterval', 'setTimeout'].includes(callee.name)) {
+                if (path.node.__timerInjected) {
+                    return;
+                }
+                const parentFn = path.findParent((p) => p.isFunctionDeclaration() || p.isVariableDeclarator());
+                let scopeName = 'global';
+
+                if (parentFn) {
+                    if (parentFn.isFunctionDeclaration() && parentFn.node.id) {
+                        scopeName = parentFn.node.id.name;
+                    } else if (parentFn.isVariableDeclarator() && parentFn.node.id.type === 'Identifier') {
+                        scopeName = parentFn.node.id.name;
+                    }
+                }
+
+
+                const contextId = `${id}::${scopeName}`;
+                const timerContextId = `${id}::${scopeName}`;
+                // if (path.parent.type === 'VariableDeclarator' && path.parent.id.type === 'Identifier') {
+                //     timerContextId += '::'+path.parent.id.name;
+                // }
+
+                path.node.arguments.unshift(
+                    t.stringLiteral(timerContextId),
+                    t.stringLiteral(contextId),
+                );
+
+                path.node.__timerInjected = true;
+            }
+        },
+    });
+
+    const { code: transformedCode } = generate.default(codeParsed);
+    const hrmHookTemplateFormatted = template(hrmHookTemplate, {
+        id,
+        componentIds: JSON.stringify(componentIds),
+    });
+
+    const timerCodeFormatted = template(timerSourceCode(), {
+        id,
+    });
+
+    return [
+        'import ComponentRegistry from \'native-document/devtools/ComponentRegistry\'',
+        transformedCode,
+        '\n',
+        hrmHookTemplateFormatted,
+        timerCodeFormatted,
+        // `console.log('${id}', 'Code injectable', ${JSON.stringify(options, null, 2)});`,
+    ].join(";");
+}

package/devtools/src/transformers/transformNdForHrm.js

@@ -0,0 +1,7 @@
+import transformForHrm from './transformForHrm.js';
+
+
+export default function transformNdForHrm(code, id, options = {}) {
+
+    return transformForHrm(code, id, options);
+}

package/devtools/src/utils.js

@@ -0,0 +1,59 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+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;
+    match.split(',').map(item => {
+        const trimmed = item.trim();
+
+        if (trimmed === 'Observable') {
+            isObservableFound = true;
+            return;
+        }
+        if (trimmed === '$') {
+            isObservableFound = true;
+        }
+    });
+    if(isObservableFound) {
+        return `import {${match} } from 'native-document/index.hrm'`;
+    }
+    return content;
+}
+
+export function transformObservableImports(code, params = {}) {
+    return code.replace(/import\s+\{([^}]+?)\}\s+from\s+['"]native-document['"]/g, renameImportedObservables);
+}
+
+export function transformObservableDeclarations(code, id) {
+    const regex = /(const|let|var)\s+([\w$]+)\s*=\s*(\$|Observable)(\.(?:init|array|json|ref|resource|object))?\s*\(/g;
+
+    return code.replace(regex, (match, varType, varName, caller, method) => {
+        const obsName = method ? `${caller}${method}` : caller;
+        return `${varType} ${varName} = ${obsName}('${varName}', '${id}', (typeof arguments !== 'undefined') ? Array.from(arguments).at(-1) : null, `;
+    });
+}
+
+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|ref|resource|object))?\s*\(/g.test(content);
+}

package/index.hrm.js

@@ -0,0 +1,22 @@
+export { default as HtmlElementWrapper, createTextNode } from './src/core/wrappers/HtmlElementWrapper';
+export { ElementCreator } from './src/core/wrappers/ElementCreator';
+export { NDElement } from './src/core/wrappers/NDElement';
+export { TemplateCloner, useCache } from './src/core/wrappers/template-cloner/TemplateCloner';
+export { SingletonView, useSingleton } from './src/core/wrappers/SingletonView';
+export { default as PluginsManager } from './src/core/utils/plugins-manager';
+export { default as Validator } from './src/core/utils/validator';
+
+export { Formatters } from './src/core/utils/formatters';
+export {default as ShortcutManager} from './src/core/utils/shortcut-manager';
+
+export * from './src/core/utils/property-accumulator';
+export * from './src/core/utils/args-types';
+export * from './src/core/utils/memoize';
+export * from './src/core/data/Observable.hrm';
+export * from './src/core/data/Store';
+
+import * as elements from './elements';
+import * as router from './router';
+import * as utils from './utils';
+
+export { elements, router, utils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.269",
+  "version": "1.0.271",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/core/data/Observable.hrm.js

@@ -0,0 +1,58 @@
+import {Observable as ObservableOriginal} from './Observable';
+
+const HrmGlobakObservableRegistry = new Map();
+
+const overrideMethods = ['array', 'init', 'object', 'json', 'ref', 'resource'];
+
+
+const override = (callback) => {
+    return function(name, id, scope, value, configs = null) {
+        if(!scope?.__hrm) {
+            scope = null;
+        }
+
+        if(scope === null) {
+            const fullId = id+':'+name;
+            const existing = HrmGlobakObservableRegistry.get(fullId);
+            if(existing) {
+                if(existing.value !== value) {
+                    existing.value = value;
+                    existing.observable.set(value);
+                }
+                return existing.observable;
+            }
+            const observable = callback(value, configs);
+            HrmGlobakObservableRegistry.set(fullId, {
+                value,
+                observable
+            });
+            return observable;
+        }
+
+        if(scope.context.states.has(name)) {
+            const item =  scope.context.states.get(name);
+            if(item.value !== value) {
+                item.value = value;
+                item.observable.set(value);
+            }
+            return item.observable;
+        }
+
+        const observable = callback(value, configs);
+        scope.context.states.set(name, {
+            observable,
+            value,
+        });
+        return observable;
+    };
+};
+
+export const Observable = override(ObservableOriginal);
+
+export const $ = Observable;
+
+overrideMethods.forEach(method => {
+
+    Observable[method] = override(ObservableOriginal[method]);
+
+});

package/src/core/data/Observable.js

@@ -13,6 +13,7 @@ import ObservableResource from './ObservableResource';
 import {Formatters} from '../utils/formatters';
 import Ref from './Ref';
 import ObservableQuery from './ObservableQuery';
+
 /**
  *
  * @param {*} value

package/src/core/data/ObservableItem.js

@@ -5,7 +5,6 @@ import PluginsManager from '../../core/utils/plugins-manager';
 import Validator from '../../core/utils/validator';
 import {deepClone} from '../utils/helpers';
 import {$getFromStorage, $saveToStorage} from '../utils/localstorage';
-import {value} from 'happy-dom/lib/PropertySymbol';
 
 /**
  * Reactive primitive value container.

package/types/observable.d.ts

@@ -264,7 +264,7 @@ export type ObservableObject<T extends Record<string, any>> = ObservableItem<T>
     $updateWith(values: Partial<T>): void;
     update(values: Partial<T>): void;
     reset(): void;
-    setOrReset(): void;
+    setOrReset(value: any): void;
     clone(): ObservableObject<T>;
     $clone(): ObservableObject<T>;
     keys(): string[];

package/devtools/plugin/dev-tools-plugin.js

@@ -1,15 +0,0 @@
-import {Observable} from "../../src/core/data/Observable";
-
-export const DevToolService = {
-    createdObservable: Observable(0),
-}
-
-
-export const DevToolsPlugin = {
-    $name: 'DevTools',
-    name: 'DevTools',
-    onCreateObservable(observable) {
-        DevToolService.createdObservable.set((last) => ++last);
-        // console.log('Création Capturé', observable.$value);
-    }
-};

package/devtools/transformers/src/transformComponentForHrm.js

@@ -1,73 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-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

@@ -1,9 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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/transformers/templates/hrm.hook.template.js

@@ -1,46 +0,0 @@
-
-if (import.meta.hot) {
-    import.meta.hot.accept((newModule) => {
-        console.log('[HMR Browser] Update accepted for ${id}');
-
-        if (!newModule) {
-            console.error('[HMR Browser] newModule is undefined!');
-            return;
-        }
-
-        try {
-            if (typeof window === 'undefined') {
-                console.error('[HMR Browser] window is undefined!');
-                return;
-            }
-        } catch (e) {
-            return;
-        }
-
-        if (!ComponentRegistry) {
-            console.error('[HMR Browser] ComponentRegistry not found!');
-            return;
-        }
-
-        console.log('[HMR Browser] Calling ComponentRegistry.update()');
-        try {
-            ComponentRegistry.update('${id}', newModule.default);
-            console.log('[HMR Browser] ✓ Update successful');
-        } catch (error) {
-            console.error('[HMR Browser] ✗ Update failed:', error);
-        }
-    });
-
-    import.meta.hot.on('vite:error', (payload) => {
-        console.error('[HMR Browser] Vite error:', payload);
-    });
-
-
-    import.meta.hot.on('nd:update', (payload) => {
-        console.error('[HMR Browser] ND:Update:', payload);
-    });
-
-    import.meta.hot.dispose(() => {
-        console.log('[HMR Browser] Disposing ${id}');
-    });
-}

package/devtools/transformers/templates/hrm.orbservable.hook.template.js

@@ -1,76 +0,0 @@
-
-function Observable(name, instance, value, ...args) {
-    if(value === undefined) {
-        value = name;
-        name = 'unknown';
-    }
-    if(!instance?.context) {
-        return __OriginalObservable__(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(value === undefined) {
-        value = name;
-        name = 'unknown';
-    }
-    if(!instance?.context) {
-        return __OriginalObservable__.init(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) {
-        return __OriginalObservable__.array(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 = __OriginalObservable__.init;
-Observable.json = __OriginalObservable__.init;
-Observable.computed = __OriginalObservable__.computed;
-const $ = Observable;

package/devtools/widget/Widget.js

@@ -1,49 +0,0 @@
-import {Observable} from "../../src/core/data/Observable";
-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

@@ -1,81 +0,0 @@
-: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

@@ -1,23 +0,0 @@
-import Widget from './widget/Widget';
-import PluginsManager from "../types/plugins-manager";
-// 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;