[inula-dev-tools]<feat> 工具类函数合入

packages/inula-dev-tools/src/utils/Checkbox.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export function Checkbox({ value }) {
+  return (
+    <div
+    style={{
+      border: "1px solid black",
+      borderRadius: "2px",
+      width: "0.75rem",
+      height: "0.75rem",
+      padding: "1px",
+      backgroundColor: "white",
+      display: "inline-block",
+      position: "relative",
+      cursor: "pointer",
+      verticalAlign: "sub",
+      marginBottom: "0.1rem"
+    }}
+    >
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          backgroundColor: value? "black" : "white",
+          position: "relative"
+        }}
+      ></div>
+    </div>
+  );
+}

packages/inula-dev-tools/src/utils/PickElement.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { createContext } from "openinula";
+
+const PickElementContext = createContext(null);
+PickElementContext.displayName = 'PickElementContext';
+
+export default PickElementContext;

packages/inula-dev-tools/src/utils/ViewSource.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import {createContext} from "openinula";
+
+const ViewSourceContext = createContext(null);
+ViewSourceContext.displayName = 'ViewSourceContext';
+
+export default ViewSourceContext;

packages/inula-dev-tools/src/utils/constants.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+// panel 页面打开后初始化连接标志
+export const InitDevToolPageConnection = 'init dev tool page connection';
+// background 解析全部 root VNodes 标志
+export const RequestAllVNodeTreeInfos = 'request all vNodes tree infos';
+// vNodes 全部树解析结果标志
+export const AllVNodeTreeInfos = 'vNode trees infos';
+// 一棵树的解析
+export const OneVNodeTreeInfos = 'one vNode tree';
+// 获取组件属性
+export const RequestComponentAttrs = 'get component attrs';
+// 返回组件属性
+export const ComponentAttrs = 'component attrs';
+
+export const ModifyAttrs = 'modify attrs';
+
+export const ModifyProps = 'modify props';
+
+export const ModifyState = 'modify state';
+
+export const ModifyHooks = 'modify hooks';
+
+export const InspectDom = 'inspect component dom';
+
+export const LogComponentData = 'log component data';
+
+export const CopyComponentAttr = 'copy component attr';
+// 传递消息来源标志
+export const DevToolPanel = 'dev tool panel';
+
+export const DevToolBackground = 'dev tool background';
+
+export const DevToolContentScript = 'dev tool content script';
+
+export const DevToolHook = 'dev tool hook';
+
+export const GetStores = 'get stores';
+
+// 高亮显示与消除
+export const Highlight = 'highlight';
+export const RemoveHighlight = 'remove highlight';
+
+// 跳转元素代码位置
+export const ViewSource = 'view source';
+
+// 选择页面元素
+export const PickElement = 'pick element';
+export const StopPickElement = 'stop pick element';
+
+// 复制和存为全局变量
+export const CopyToConsole = 'copy to console';
+export const StorageValue = 'storage value';

packages/inula-dev-tools/src/utils/injectUtils.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+function ifNullThrows(value) {
+  if (value === null) {
+    throw new Error('receive a null');
+  }
+
+  return value;
+}
+
+export function injectSrc(src) {
+  const script = document.createElement('script');
+  script.src = src;
+  script.type = 'text/javascript';
+  script.async = false;
+  script.onload = function () {
+    // 加载完毕后需要移除
+    script.remove();
+  };
+
+  ifNullThrows(
+    document.head
+    || document.getElementsByName('head')[0]
+    || document.documentElement
+  ).appendChild(script);
+}
+
+function injectCode(code) {
+  const script = document.createElement('script');
+  script.textContent = code;
+
+  ifNullThrows(document.documentElement).appendChild(script);
+  ifNullThrows(script.parentNode).removeChild(script);
+}

packages/inula-dev-tools/src/utils/logUtil.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+/**
+ * chrome 通过 iframe 的方式将 panel 页面嵌入到开发者工具中，如果报错无法感知
+ * 同时也无法在运行时打断点，需要适当的日志辅助开发和定位问题
+ */
+interface LoggerType {
+  error: typeof console.error,
+  info: typeof console.info,
+  log: typeof console.log,
+  warn: typeof console.warn
+}
+
+export function createLogger(id: string): LoggerType {
+  return ['error', 'info', 'log', 'warn'].reduce((pre, current) => {
+    const prefix = `[inula_dev_tools][${id}] `;
+    pre[current] = (...data) => {
+      console[current](prefix, ...data);
+    };
+    return pre;
+  }, {} as LoggerType);
+}

packages/inula-dev-tools/src/utils/publicUtil.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { debounce } from 'lodash';
+
+export const debounceFunc = debounce(callback => {
+  callback();
+}, 100);

packages/inula-dev-tools/src/utils/regExpUtil.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export function createRegExp(expression: string) {
+  let str = expression;
+  if (str[0] === '/') {
+    str = str.slice(1);
+  }
+  if (str[str.length - 1] === '/') {
+    str = str.slice(0, str.length - 1);
+  }
+  try {
+    return new RegExp(str, 'i');
+  } catch (err) {
+    return null;
+  }
+}

packages/inula-dev-tools/src/utils/transferUtils.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+const devTools = 'INULA_DEV_TOOLS';
+
+interface PayloadType {
+  type: string;
+  data?: any;
+  inulaX?: boolean;
+}
+
+interface Message {
+  type: typeof devTools;
+  payload: PayloadType;
+  from: string;
+}
+
+export function packagePayload(payload: PayloadType, from: string, inulaX?: boolean): Message {
+  if (inulaX) {
+    payload.inulaX = true;
+  }
+  return {
+    type: devTools,
+    payload,
+    from
+  };
+}
+
+export function checkMessage(data: any, from: string) {
+  return data?.type === devTools && data?.from === from;
+}
+
+export function changeSource(message: Message, from: string) {
+  message.from = from;
+}