native-document 1.0.15 → 1.0.16-8.2

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/transformers/templates/hrm.hook.template.js

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

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

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

@@ -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 "../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;

package/dist/native-document.components.min.css

@@ -0,0 +1 @@
+.is-draggable{cursor:grab}.is-dragging{cursor:grabbing;user-select:none}:root{--resize-handle-size:3px;--resize-handle-color:var(--gray-lite-3);--resize-handle-color-hover:var(--gray-lite-1);--resize-notch-size:6px}.is-resizable{box-sizing:border-box}.resize-handle{position:absolute;z-index:10;&.is-right{cursor:ew-resize;height:100%;right:0;top:0;width:var(--resize-handle-size);&:hover{background:var(--resize-handle-color-hover);opacity:.3}}&.is-left{cursor:ew-resize;height:100%;left:0;top:0;width:var(--resize-handle-size);&:hover{background:var(--resize-handle-color-hover);opacity:.3}}&.is-top{cursor:ns-resize;height:var(--resize-handle-size);left:0;top:0;width:100%;&:hover{background:var(--resize-handle-color-hover);opacity:.3}}&.is-bottom{bottom:0;cursor:ns-resize;height:var(--resize-handle-size);left:0;width:100%;&:hover{background:var(--resize-handle-color-hover);opacity:.3}}&.is-top-left{cursor:nwse-resize;left:0}&.is-top-left,&.is-top-right{height:var(--resize-notch-size);top:0;width:var(--resize-notch-size)}&.is-top-right{cursor:nesw-resize;right:0}&.is-bottom-left{cursor:nesw-resize;left:0}&.is-bottom-left,&.is-bottom-right{bottom:0;height:var(--resize-notch-size);width:var(--resize-notch-size)}&.is-bottom-right{cursor:nwse-resize;right:0;&:after{border-color:transparent transparent var(--resize-handle-color) transparent;border-style:solid;border-width:0 0 var(--resize-notch-size) var(--resize-notch-size);bottom:3px;content:"";height:0;position:absolute;right:3px;transition:border-color .15s ease;width:0}&:hover:after{border-color:transparent transparent var(--resize-handle-color-hover) transparent}}}body.is-resizing{cursor:nwse-resize;user-select:none}