feat(data-fronts): add identifiers

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0"
+  "version": "0.1.1"
 }

packages/fronts-bundler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fronts-bundler",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

packages/fronts-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fronts-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "unpkg": "dist/index.umd.js",
@@ -16,7 +16,7 @@
     "react": "^16.13.0"
   },
   "dependencies": {
-    "fronts": "^0.1.0"
+    "fronts": "^0.1.1"
   },
   "devDependencies": {
     "@types/react": "^16.13.0",

packages/fronts-react/src/useApp.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
-import { injectStyle, loadApp, Render, unmount } from 'fronts';
+import { getUid, injectStyle, loadApp, Render, unmount } from 'fronts';
 import { AppWrapper, UseApp } from './interface';
 
 /**
@@ -38,13 +38,9 @@ export const useApp: UseApp = (options) => {
           callback && callback();
         };
       }, []);
+      const uid = getUid(options.name);
       return (
-        <div
-          ref={rootRef}
-          data-fronts={options?.name}
-          data-render={Date.now()}
-          {...options.attrs}
-        >
+        <div ref={rootRef} data-fronts={uid} {...options.attrs}>
           <div ref={renderRef}></div>
         </div>
       );

packages/fronts-react/src/useIframe.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { getIframeUrl } from 'fronts';
+import { getIframeUrl, getUid } from 'fronts';
 import { UseIframe } from './interface';
 
 /**
@@ -22,7 +22,7 @@ export const useIframe: UseIframe = ({ name, url = '', attrs = {} }) => {
             setIframeUrl(url);
           });
       }, []);
-      const uid = Math.random().toString(36).slice(2, -1);
+      const uid = getUid(name);
       return iframeUrl ? (
         <iframe frameBorder="no" {...attrs} src={iframeUrl} data-fronts={uid} />
       ) : null;

packages/fronts-react/src/useWebComponents.tsx

@@ -7,6 +7,7 @@ import {
   injectStyle,
   unmount,
   retargetEvents,
+  getUid,
 } from 'fronts';
 import { AppWrapper, UseWebComponents } from './interface';
 
@@ -48,7 +49,8 @@ export const useWebComponents: UseWebComponents = (options) => {
           callback && callback();
         };
       }, []);
-      return <fronts-app />;
+      const uid = getUid(options.name);
+      return <fronts-app data-fronts={uid} />;
     }),
     [loaded]
   );

packages/fronts-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fronts-test",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

packages/fronts-transport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fronts-transport",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "unpkg": "dist/index.umd.js",

packages/fronts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fronts",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.cjs.js",
   "unpkg": "dist/index.umd.js",
@@ -13,7 +13,7 @@
     "data-transport": "^2.0.1"
   },
   "dependencies": {
-    "fronts-transport": "^0.1.0"
+    "fronts-transport": "^0.1.1"
   },
   "author": "unadlib",
   "license": "MIT"

packages/fronts/src/getUid.ts

@@ -0,0 +1,2 @@
+export const getUid = (name: string) =>
+  `${name}-${Math.random().toString(36).slice(2, -1)}`;

packages/fronts/src/index.ts

@@ -17,3 +17,4 @@ export * from './injectStyle';
 export * from './getMeta';
 export * from './unmount';
 export * from './retargetEvents';
+export * from './getUid';

packages/fronts/src/useApp.ts

@@ -1,3 +1,4 @@
+import { getUid } from './getUid';
 import { injectStyle } from './injectStyle';
 import { UseApp } from './interface';
 import { loadApp } from './loadApp';
@@ -19,8 +20,8 @@ export const useApp: UseApp = (options) => {
       );
     }
     const rootNode = document.createElement('div');
-    rootNode.setAttribute('data-fronts', options.name ?? 'undefined');
-    rootNode.setAttribute('data-time', Date.now().toString());
+    const uid = getUid(options.name);
+    rootNode.setAttribute('data-fronts', uid);
     const attributes: Record<string, any> = options.attrs ?? {};
     for (const key in attributes) {
       rootNode.setAttribute(key, attributes[key]);

packages/fronts/src/useIframe.ts

@@ -1,3 +1,4 @@
+import { getUid } from './getUid';
 import { getScriptLink } from './importApp';
 import { UseIframe } from './interface';
 
@@ -35,7 +36,7 @@ export const getIframeUrl = async (siteName: string) => {
 export const useIframe: UseIframe = async ({ target, name, url, attrs }) => {
   const iframe = document.createElement('iframe');
   iframe.src = url ?? (await getIframeUrl(name));
-  const uid = Math.random().toString(36).slice(2, -1);
+  const uid = getUid(name);
   iframe.setAttribute('frameBorder', 'no');
   const attributes: Record<string, any> = attrs ?? {};
   for (const key in attributes) {

packages/fronts/src/useWebComponents.ts

@@ -1,3 +1,4 @@
+import { getUid } from './getUid';
 import { injectStyle } from './injectStyle';
 import { DefineCustomElementOptions, UseWebComponents } from './interface';
 import { loadApp } from './loadApp';
@@ -52,6 +53,8 @@ export const useWebComponents: UseWebComponents = (options) => {
       );
     }
     const customElement = document.createElement('fronts-app');
+    const uid = getUid(options.name);
+    customElement.setAttribute('data-fronts', uid);
     options.target.appendChild(customElement);
     const { node, injectedRoot } = defineCustomElement({
       shadowMode: options.shadowMode,