release: v1.1.0

lionelhorn · Jul 20, 2022 · f23dc51 · f23dc51
1 parent 6d1c0fd
commit f23dc51
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.1.0 (21 Jul 2022)
+
+* feat: cdn for embedded mode
+
 ## 1.0.1 (20 Jul 2022)
 
 * fix: embedded devtools highlight

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chii",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Chrome devtools framework",
   "main": "./server/index.js",
   "bin": {

diff --git a/patches/devtools-frontend/embedded.patch b/patches/devtools-frontend/embedded.patch
@@ -4,6 +4,19 @@ Date: Sun, 17 Jul 2022 12:28:39 +0800
 Subject: embedded
 
 
+diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts
+index 10d9a9302979095e6047aa1fcedbe7e761dfe637..e903490d9c7e58a8123417dbc68365a2165ba7cd 100644
+--- a/front_end/core/root/Runtime.ts
++++ b/front_end/core/root/Runtime.ts
+@@ -5,7 +5,7 @@
+ const originalConsole = console;
+ const originalAssert = console.assert;
+
+-const queryParamsObject = new URLSearchParams(location.search);
++const queryParamsObject = new URLSearchParams(location.search || location.hash.replace(/^#/, ''));
+
+ // The following variable are initialized all the way at the bottom of this file
+ let importScriptPathPrefix: string;
 diff --git a/front_end/core/sdk/Connections.ts b/front_end/core/sdk/Connections.ts
 index cfa1ca58f1d45d5034731cae037e91364be9de6e..6a575078a98de2df5deacd02469b7c038f16696c 100644
 --- a/front_end/core/sdk/Connections.ts

diff --git a/src/DevtoolsFrame.ts b/src/DevtoolsFrame.ts
@@ -4,19 +4,18 @@ import h from 'licia/h';
 import evalCss from 'licia/evalCss';
 import toStr from 'licia/toStr';
 import toNum from 'licia/toNum';
+import startWith from 'licia/startWith';
 
 const $document = $(document as any);
 
 export default class DevtoolsFrame {
-  private targetOrigin: string = '';
   private container: HTMLDivElement;
   private $container: $.$;
   private $draggable: $.$;
   private height: number;
   private startY: number = 0;
   private originHeight: number = 0;
-  constructor(targetOrigin: string) {
-    this.targetOrigin = targetOrigin;
+  constructor() {
     this.container = h('.__chobitsu-hide__') as HTMLDivElement;
     this.$container = $(this.container);
     this.$container.css({
@@ -63,30 +62,39 @@ export default class DevtoolsFrame {
     this.height = height;
     localStorage.setItem('chii-embedded-height', toStr(height));
   }
-  attach() {
-    const { targetOrigin } = this;
+  attach(serverUrl: string) {
     let protocol = location.protocol;
     let host = location.host;
     if (protocol === 'about:' || protocol === 'blob:') {
       protocol = window.parent.location.protocol;
       host = window.parent.location.host;
     }
+    const hostOrigin = `${protocol}//${host}`;
     const frame = document.createElement('iframe');
     const $frame = $(frame);
     $frame.css({
       border: 'none',
       width: '100%',
       height: '100%',
     });
-    frame.src = `${targetOrigin}/front_end/chii_app.html?embedded=${protocol}//${host}`;
+    let targetOrigin = serverUrl;
+    if (startWith(serverUrl, 'blob:')) {
+      targetOrigin = hostOrigin;
+      frame.src = `${serverUrl}#?embedded=${encodeURIComponent(hostOrigin)}`;
+    } else {
+      frame.src = `${serverUrl}/front_end/chii_app.html?embedded=${encodeURIComponent(hostOrigin)}`;
+    }
+
     chobitsu.setOnMessage((message: string) => {
       frame.contentWindow?.postMessage(message, targetOrigin);
     });
     window.addEventListener('message', event => {
       if (event.origin !== targetOrigin) {
         return;
       }
-      chobitsu.sendRawMessage(event.data);
+      if (event.data) {
+        chobitsu.sendRawMessage(event.data);
+      }
     });
 
     this.container.appendChild(frame);

diff --git a/src/target.ts b/src/target.ts
@@ -7,6 +7,7 @@ import Socket from 'licia/Socket';
 import ready from 'licia/ready';
 import chobitsu from 'chobitsu';
 import DevtoolsFrame from './DevtoolsFrame';
+import createUrl from 'licia/createUrl';
 
 const sessionStore = safeStorage('session');
 
@@ -38,11 +39,13 @@ if ((window as any).ChiiServerUrl) {
 }
 
 let embedded = false;
+let cdn = '';
 const element = getTargetScriptEl();
 if (element) {
   if (element.getAttribute('embedded') === 'true') {
     embedded = true;
   }
+  cdn = element.getAttribute('cdn') || '';
 }
 
 function getFavicon() {
@@ -99,10 +102,34 @@ if (!embedded) {
   });
 } else {
   const protocol = location.protocol === 'https:' ? 'https:' : 'http:';
-  const devtoolsFrame = new DevtoolsFrame(`${protocol}//${ChiiServerUrl}`);
+  let serverUrl = `${protocol}//${ChiiServerUrl}`;
+  if (cdn) {
+    serverUrl = createUrl(
+      `
+    <!DOCTYPE html>
+    <html lang="en">
+    <meta charset="utf-8">
+    <title>DevTools</title>
+    <style>
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: rgb(41 42 45);
+        }
+      }
+    </style>
+    <meta name="referrer" content="no-referrer">
+    <script type="module" src="${cdn}/front_end/entrypoints/chii_app/chii_app.js"></script>
+    <body class="undocked" id="-blink-dev-tools">
+    `,
+      {
+        type: 'text/html',
+      }
+    );
+  }
+  const devtoolsFrame = new DevtoolsFrame();
   if (document.body) {
-    devtoolsFrame.attach();
+    devtoolsFrame.attach(serverUrl);
   } else {
-    ready(() => devtoolsFrame.attach());
+    ready(() => devtoolsFrame.attach(serverUrl));
   }
 }
diff --git a/test/demo.js b/test/demo.js
@@ -164,6 +164,9 @@ function injectTarget() {
   if (location.href.indexOf('embedded=true') > -1) {
     script.setAttribute('embedded', 'true');
   }
+  if (location.href.indexOf('cdn=true') > -1) {
+    script.setAttribute('cdn', 'https://cdn.jsdelivr.net/npm/chii/public');
+  }
   document.head.appendChild(script);
 
   window.ChiiServerUrl = location.host;