@drayman/core 1.0.0 → 1.5.0

package/dist/component-processor.js

@@ -71,6 +71,7 @@ class EventHubClass {
     #handlers;
 }
 const EventHub = new EventHubClass();
+const ComponentInstance = {};
 // const componentInstanceId = process.argv[2];
 let browserCallbacks = {};
 // let tree = [];
@@ -96,15 +97,16 @@ const serializeComponentInstanceOptions = (options) => {
     return serialized;
 };
 const renderedComps = {};
-const initializeComponentInstance = async ({ browserCommands = [], extensionsPath, extensionsOptions, componentRootDir, componentName, componentOptions, componentNamePrefix = '' }) => {
+const initializeComponentInstance = async ({ componentInstanceId, browserCommands = [], extensionsPath, extensionsOptions, componentRootDir, componentName, componentOptions, componentNamePrefix = '' }) => {
+    ComponentInstance.id = componentInstanceId;
     if (extensionsPath) {
         extensions = await require(path_1.default.join(process.cwd(), extensionsPath))(extensionsOptions);
     }
     const Browser = {};
     for (const command of browserCommands) {
-        Browser[command] = async (data = {}) => new Promise((resolve, reject) => {
+        Browser[command] = async (data = {}, element) => new Promise((resolve, reject) => {
             const newData = {};
-            for (const key of Object.keys(data)) {
+            for (const key of Object.keys(data || {})) {
                 if (typeof data[key] === 'function') {
                     const callbackId = shortid_1.default.generate();
                     newData[key] = callbackId;
@@ -122,7 +124,7 @@ const initializeComponentInstance = async ({ browserCommands = [], extensionsPat
                 callback: (response) => resolve(response),
                 once: true,
             };
-            sendMessage({ type: 'browserCommand', payload: { data: newData, callbackId, command } });
+            sendMessage({ type: 'browserCommand', payload: { data: newData, callbackId, command, element } });
         });
     }
     props = componentOptions || {};
@@ -161,6 +163,7 @@ const initializeComponentInstance = async ({ browserCommands = [], extensionsPat
             EventHub,
             Components,
             Browser,
+            ComponentInstance,
             ...extensions.importable,
         });
         let prevChildProps = {};
@@ -213,6 +216,9 @@ const initializeComponentInstance = async ({ browserCommands = [], extensionsPat
         // const delta = jsondiff.diff(previouslySerializedTree, result.tree);
         // const delta = compare(previouslySerializedTree, result.tree);
         sendMessage({ type: 'view', payload: { view: result.tree, updateId } });
+        if (updateId === 1 && ComponentInstance.onInit) {
+            await ComponentInstance.onInit();
+        }
         // previouslySerializedTree = { ...result.tree };
         // previouslySerializedTree = JSON.parse(JSON.stringify(result.tree));
         // process?.send?.({ type: 'view', payload: { view: serializedView } });
@@ -228,6 +234,7 @@ const initializeComponentInstance = async ({ browserCommands = [], extensionsPat
         EventHub,
         Components,
         Browser,
+        ComponentInstance,
         ...extensions.importable,
     });
     await forceUpdate();
@@ -276,12 +283,18 @@ const handleComponentEvent = async ({ requestId, options, files, eventName }) =>
 const handleEventHubEvent = async ({ type, data, groupId }) => {
     await EventHub._execute(type, data, groupId);
 };
+const handleDestroyComponentInstance = async () => {
+    if (ComponentInstance.onDestroy) {
+        await ComponentInstance.onDestroy();
+    }
+};
 worker_1.expose({
     initializeComponentInstance,
     updateComponentInstanceProps,
     handleBrowserCallback,
     handleComponentEvent,
     handleEventHubEvent,
+    handleDestroyComponentInstance,
     events() {
         return observable_1.Observable.from(subject);
     }

package/dist/index.d.ts

@@ -43,10 +43,10 @@ export declare const onInitializeComponentInstance: ({ namespaceId, extensionsPa
 }) => Promise<void>;
 export declare const onDisconnect: ({ connectionId }: {
     connectionId: any;
-}) => void;
+}) => Promise<void>;
 export declare const onDestroyComponentInstance: ({ componentInstanceId }: {
     componentInstanceId: any;
-}) => void;
+}) => Promise<void>;
 export declare const componentInstances: {
     [componentInstanceId: string]: {
         terminate: () => Promise<void>;

package/dist/index.js

@@ -7,11 +7,16 @@ exports.componentInstances = exports.onDestroyComponentInstance = exports.onDisc
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
 const shortid_1 = __importDefault(require("shortid"));
-const node_find_1 = require("node-find");
 const typescript_1 = __importDefault(require("typescript"));
-// import Piscina from 'piscina';
-// import { MessageChannel, MessagePort } from 'worker_threads';
 const threads_1 = require("threads");
+const child_process_1 = require("child_process");
+const getNpmPackages = (nodeModulesPath) => {
+    return new Promise((resolve) => {
+        child_process_1.exec(`npm ls -a -p`, { cwd: nodeModulesPath, }, function (error, stdout, stderr) {
+            resolve(stdout ? stdout.split('\n').filter(x => path_1.default.isAbsolute(x)) : []);
+        });
+    });
+};
 const handleComponentEvent = ({ componentInstanceId, eventName, options, files, onSuccess, onError }) => {
     options = options || {};
     if (typeof options === 'string') {
@@ -24,19 +29,19 @@ const handleComponentEvent = ({ componentInstanceId, eventName, options, files,
     }
     else {
         onError({ err: `Component instance was not found.` });
-        // res.status(500).send(`Component instance was not found.`);
     }
 };
 exports.handleComponentEvent = handleComponentEvent;
 async function getElementsScriptPaths({ nodeModulesPath = null }) {
     nodeModulesPath = nodeModulesPath || path_1.default.join(process.cwd(), 'node_modules');
-    const packages = node_find_1.find(node_find_1.path('*/package.json'), { start: nodeModulesPath });
+    const packagePaths = await getNpmPackages(nodeModulesPath);
     const paths = {};
-    for await (const packageJsonPath of packages) {
-        const packageJson = await fs_extra_1.default.readJSON(packageJsonPath.toString('/'), { throws: false });
+    for (const packagePath of packagePaths) {
+        const packageJsonPath = path_1.default.join(packagePath, 'package.json');
+        const packageJson = await fs_extra_1.default.readJSON(packageJsonPath, { throws: false });
         const elements = packageJson?.drayman?.elements || {};
         for (const element of Object.keys(elements)) {
-            paths[element] = path_1.default.join(packageJsonPath.parent.toString('/'), elements[element].script);
+            paths[element] = path_1.default.join(packagePath, elements[element].script);
         }
     }
     return paths;
@@ -65,74 +70,22 @@ const handleEventHubEvent = async ({ data, groupId = null, type, namespaceId = n
 exports.handleEventHubEvent = handleEventHubEvent;
 const saveComponent = async ({ script, outputFile }) => {
     const tsConfig = JSON.parse(await fs_extra_1.default.readFile(path_1.default.join(__dirname, process.env.NODE_ENV === 'test' ? `../tests/component-processor.tsconfig.test.json` : `../component-processor.tsconfig.json`), 'utf-8'));
-    // const componentOutputDir = path.join(rootDir, `./src/components`);
-    // for (const componentFile of componentFiles) {
-    // const componentScript = await fs.readFile(path.join(componentInputDir, componentFile), 'utf-8');
     const transpiledComponentScript = typescript_1.default.transpileModule(script, tsConfig);
     await fs_extra_1.default.outputFile(outputFile, transpiledComponentScript.outputText);
-    // }
 };
 exports.saveComponent = saveComponent;
-// const piscina = new Piscina({
-//     filename: path.join(__dirname, `./component-processor.js`),
-//     maxThreads: Infinity,
-//     // minThreads: 100,
-// });
 const onInitializeComponentInstance = async ({ namespaceId = null, extensionsPath = null, extensionsOptions = null, componentNamePrefix = '', componentName, componentRootDir, componentInstanceId, componentOptions, connectionId, emit, onComponentInstanceConsole, browserCommands, }) => {
     if (componentOptions && typeof componentOptions === 'string') {
         componentOptions = JSON.parse(componentOptions);
     }
-    // const subprocess = execa.node(
-    //     path.join(__dirname, `./component-processor.js`),
-    //     [
-    //         componentInstanceId
-    //     ],
-    //     { nodeOptions: ['--unhandled-rejections=strict'], serialization: 'advanced', }
-    // );
-    // const abortController = new AbortController();
-    // const { port1, port2 } = new MessageChannel();
-    // const { signal } = abortController;
-    // port2.on('message', (message) => console.log('received', message));
-    // port2.postMessage({ foo: 'bar' });
-    // // // subprocess.stdout?.on('data', (data) => {
-    // // //     onComponentInstanceConsole?.({ text: data.toString('utf8') });
-    // // //     // console.log(data.toString('utf8'));
-    // // //     // httpClient.debug({ data: data.toString('utf8') });
-    // // // });
-    // // // subprocess.stderr?.on('data', (data) => {
-    // // //     onComponentInstanceConsole?.({ text: data.toString('utf8') });
-    // // //     // console.log(data.toString('utf8'));
-    // // //     // httpClient.debug({ data: data.toString('utf8') });
-    // // // });
-    /**
-     * When component instance gets destroyed, we must check for existing user event requests
-     * and cancel them.
-     */
-    // subprocess.on('exit', (x) => {
-    //     // const requests = componentInstances[componentInstanceId].eventRequests;
-    //     // for (const requestId of Object.keys(requests)) {
-    //     //     requests[requestId].status(500).send(`Component instance was destroyed.`);
-    //     // }
-    //     delete componentInstances[componentInstanceId];
-    //     emit({ type: 'componentInstanceDestroyed', payload: {}, componentInstanceId });
-    //     // httpClient.sendView({
-    //     //     view: null,
-    //     // });
-    // });
-    /**
-     * Handles messages sent by component instance process.
-     */
     const worker = await threads_1.spawn(new threads_1.Worker(`./component-processor.js`));
     exports.componentInstances[componentInstanceId] = {
-        // abortController,
-        // messagePort: port2,
         worker,
         terminate: async () => {
             await threads_1.Thread.terminate(worker);
             delete exports.componentInstances[componentInstanceId];
             emit({ type: 'componentInstanceDestroyed', payload: {}, componentInstanceId });
         },
-        // process: subprocess,
         /**
          * Used to store user event requests (on button click, on input, etc.).
          */
@@ -140,61 +93,66 @@ const onInitializeComponentInstance = async ({ namespaceId = null, extensionsPat
         connectionId,
         namespaceId,
     };
-    if (toTerminate[componentInstanceId]) {
-        exports.componentInstances[componentInstanceId].terminate();
-        delete toTerminate[componentInstanceId];
-    }
-    else {
-        worker.events().subscribe(({ type, payload }) => {
-            /**
-             * When there is a response to user event request.
-             */
-            if (type === 'response') {
-                const { requestId, result, err } = payload;
-                if (err) {
-                    // emit({ type: 'componentEventError', payload: { err, requestId }, componentInstanceId });
-                    exports.componentInstances[componentInstanceId].eventRequests[requestId].onError({ err });
-                    // componentInstances[componentInstanceId].eventRequests[requestId].status(500).send(`${err}`);
-                }
-                else {
-                    // emit({ type: 'componentEventSuccess', payload: { result, requestId }, componentInstanceId });
-                    exports.componentInstances[componentInstanceId].eventRequests[requestId].onSuccess({ result });
-                    // componentInstances[componentInstanceId].eventRequests[requestId].json(result || null);
-                }
-                delete exports.componentInstances[componentInstanceId].eventRequests[requestId];
-            }
-            else if (type === 'eventHubEvent') {
-                const { eventPayload, groupId, type } = payload;
-                exports.handleEventHubEvent({ data: eventPayload, groupId, type, namespaceId });
-            }
-            else if (type === 'console') {
-                const { text } = payload;
-                onComponentInstanceConsole?.({ text });
+    worker.events().subscribe(({ type, payload }) => {
+        /**
+         * When there is a response to user event request.
+         */
+        if (type === 'response') {
+            const { requestId, result, err } = payload;
+            if (err) {
+                exports.componentInstances[componentInstanceId].eventRequests[requestId].onError({ err });
             }
             else {
-                emit({ type, payload, componentInstanceId });
+                exports.componentInstances[componentInstanceId].eventRequests[requestId].onSuccess({ result });
             }
-        });
-        worker.initializeComponentInstance({ browserCommands, componentNamePrefix, componentName, componentRootDir, componentOptions, componentInstanceId, extensionsPath, extensionsOptions });
-    }
+            delete exports.componentInstances[componentInstanceId].eventRequests[requestId];
+        }
+        else if (type === 'eventHubEvent') {
+            const { eventPayload, groupId, type } = payload;
+            exports.handleEventHubEvent({ data: eventPayload, groupId, type, namespaceId });
+        }
+        else if (type === 'console') {
+            const { text } = payload;
+            onComponentInstanceConsole?.({ text });
+        }
+        else {
+            emit({ type, payload, componentInstanceId });
+        }
+    });
+    worker.initializeComponentInstance({ browserCommands, componentNamePrefix, componentName, componentRootDir, componentOptions, componentInstanceId, extensionsPath, extensionsOptions });
+    await clearGarbage();
 };
 exports.onInitializeComponentInstance = onInitializeComponentInstance;
-const onDisconnect = ({ connectionId }) => {
-    for (const componentInstanceId of Object.keys(exports.componentInstances).filter(x => exports.componentInstances[x].connectionId === connectionId)) {
-        exports.onDestroyComponentInstance({ componentInstanceId });
-    }
+const onDisconnect = async ({ connectionId }) => {
+    garbage.connections.push(connectionId);
+    await clearGarbage();
 };
 exports.onDisconnect = onDisconnect;
-const toTerminate = {};
-const onDestroyComponentInstance = ({ componentInstanceId }) => {
-    if (!exports.componentInstances[componentInstanceId]) {
-        toTerminate[componentInstanceId] = true;
-    }
-    else {
-        exports.componentInstances[componentInstanceId].terminate();
-    }
-    //     delete componentInstances[componentInstanceId];
-    //     emit({ type: 'componentInstanceDestroyed', payload: {}, componentInstanceId });
+const garbage = {
+    connections: [],
+    componentInstances: [],
+};
+const onDestroyComponentInstance = async ({ componentInstanceId }) => {
+    garbage.componentInstances.push(componentInstanceId);
+    await clearGarbage();
 };
 exports.onDestroyComponentInstance = onDestroyComponentInstance;
 exports.componentInstances = {};
+const clearGarbage = async () => {
+    const aliveComponentInstances = Object.keys(exports.componentInstances);
+    const garbageComponentInstanceIds = [
+        ...aliveComponentInstances.filter(x => garbage.connections.includes(exports.componentInstances[x].connectionId)),
+        ...garbage.componentInstances,
+    ];
+    for (const componentInstanceId of garbageComponentInstanceIds) {
+        if (exports.componentInstances[componentInstanceId]) {
+            try {
+                await exports.componentInstances[componentInstanceId].worker.handleDestroyComponentInstance();
+            }
+            catch (err) {
+                console.warn(err);
+            }
+            exports.componentInstances[componentInstanceId].terminate();
+        }
+    }
+};

package/dist/utils.js

@@ -61,7 +61,7 @@ const render = async (raw, childRenderer = null, renderedArr = [], events = {},
                             }
                             // options[optionKey] = true;
                         }
-                        else if (all_html_attributes_1.svgElementAttributes[type] && (all_html_attributes_1.svgElementAttributes[type].includes(optionKey) || all_html_attributes_1.svgElementAttributes['*'].includes(optionKey))) {
+                        else if (optionKey === 'ref' || (all_html_attributes_1.svgElementAttributes[type] && (all_html_attributes_1.svgElementAttributes[type].includes(optionKey) || all_html_attributes_1.svgElementAttributes['*'].includes(optionKey)))) {
                             attrs[optionKey] = options[optionKey];
                         }
                         else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/core",
-  "version": "1.0.0",
+  "version": "1.5.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -22,7 +22,7 @@
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@drayman/types": "^1.0.0",
+    "@drayman/types": "^1.5.0",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.39",
     "babel-jest": "^26.6.3",
@@ -39,5 +39,5 @@
     "ts-node": "^9.1.1",
     "typescript": "~4.1.5"
   },
-  "gitHead": "46398c1c4c9a0d43857174369f214d516a3dfcc2"
+  "gitHead": "072618ea36a1d151c16e5233c502ad737eec5785"
 }