@shoplflow/extension 0.0.2

package/src/pages/popup/Popup.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import withSuspense from '@src/shared/hoc/withSuspense';
+import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
+import '@shoplflow/base/styles';
+import { ShoplflowProvider, Stack, Text, ScrollArea, colorTokens } from '@shoplflow/base';
+import { ArcElement, Chart as ChartJS, Tooltip } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+import styled from '@emotion/styled';
+import ElementListCard from '@src/Components/ElementListCard';
+
+ChartJS.register(ArcElement, Tooltip);
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 20px;
+  width: fit-content;
+  background: ${colorTokens.neutral150};
+  padding: 20px;
+  border-radius: 10px;
+`;
+
+const TableWrapper = styled(Card)`
+  width: 100%;
+  padding: 12px 8px;
+`;
+
+const Popup = () => {
+  const [{ systems, components, systemElement }, setData] = useState({
+    systems: 0,
+    components: 0,
+    systemElement: {},
+  });
+
+  useEffect(() => {
+    (async () => {
+      await chrome.storage.local.get(['systems', 'components', 'systemElement'], (result) => setData(result));
+    })();
+  }, []);
+
+  const percentage = (systems / components) * 100;
+
+  const data = {
+    labels: ['HTML 요소', 'shoplflow'],
+    datasets: [
+      {
+        label: '# 컴포넌트 개수',
+        data: [components - systems, systems],
+        backgroundColor: ['#3eb0b8', '#84c2fc'],
+        borderColor: ['#2f839f', '#3299fe'],
+        borderWidth: 1,
+      },
+    ],
+  };
+  const sortedSystemElement = Object.keys(systemElement).sort((a, b) => systemElement[b] - systemElement[a]);
+
+  return (
+    <ShoplflowProvider>
+      <Stack.Vertical width={'500px'} height={'300px'} align={'center'} spacing={'spacing20'}>
+        <Stack.Horizontal height={'100%'} width={'100%'} justify={'space-between'} spacing={'spacing16'}>
+          <Card>
+            <Doughnut data={data} height={150} width={150} />
+            <Stack.Vertical width={'100%'} height={'100%'} spacing={'spacing12'} justify={'center'} align={'center'}>
+              <Text typography={'body1_700'} whiteSpace={'nowrap'}>
+                디자인시스템 교체율 {percentage.toFixed(2)}%
+              </Text>
+              <Stack.Vertical width={'100%'} height={'100%'} spacing={'spacing06'} justify={'center'} align={'center'}>
+                <Stack.Horizontal width={'100%'} justify={'center'} align={'center'} spacing={'spacing04'}>
+                  <Text typography={'caption_400'}>전체 요소</Text>
+                  <Text typography={'caption_700'} color={'navy300'}>
+                    {components}
+                  </Text>
+                </Stack.Horizontal>
+                <Stack.Horizontal width={'100%'} justify={'center'} align={'center'} spacing={'spacing04'}>
+                  <Text typography={'caption_400'}>시스템 요소</Text>
+                  <Text typography={'caption_700'} color={'primary300'}>
+                    {systems}
+                  </Text>
+                </Stack.Horizontal>
+              </Stack.Vertical>
+            </Stack.Vertical>
+          </Card>
+          <TableWrapper>
+            <Text
+              typography={'body1_700'}
+              whiteSpace={'nowrap'}
+              style={{
+                padding: '4px 12px',
+              }}
+            >
+              시스템 구성 요소
+            </Text>
+            <ScrollArea>
+              <Stack.Vertical spacing={'spacing04'}>
+                {sortedSystemElement?.map((key, index) => {
+                  const color = {
+                    0: 'primary300',
+                    1: 'green300',
+                    2: 'yellow300',
+                  };
+                  return <ElementListCard key={key} title={key} value={systemElement[key]} valueColor={color[index]} />;
+                })}
+              </Stack.Vertical>
+            </ScrollArea>
+          </TableWrapper>
+        </Stack.Horizontal>
+      </Stack.Vertical>
+    </ShoplflowProvider>
+  );
+};
+
+export default withErrorBoundary(
+  withSuspense(Popup, <div> Loading ... </div>),
+  <div>
+    <Text typography={'body2_700'} whiteSpace={'nowrap'}>
+      샤플 서비스가 아니거나 에러가 발생했어요.
+    </Text>
+    <Text typography={'body2_700'} whiteSpace={'nowrap'}>
+      shoplworks 도메인으로 접속해주세요.
+    </Text>
+  </div>,
+);

package/src/pages/popup/index.css

@@ -0,0 +1,13 @@
+body {
+
+  padding: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}

package/src/pages/popup/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Popup</title>
+  </head>
+
+  <body>
+    <div id="app-container"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/src/pages/popup/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import '@pages/popup/index.css';
+import Popup from '@pages/popup/Popup';
+import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+import { attachTwindStyle } from '@src/shared/style/twind';
+
+refreshOnUpdate('pages/popup');
+
+function init() {
+  const appContainer = document.querySelector('#app-container');
+  if (!appContainer) {
+    throw new Error('Can not find #app-container');
+  }
+  attachTwindStyle(appContainer, document);
+  const root = createRoot(appContainer);
+  root.render(<Popup />);
+}
+
+init();

package/src/shared/hoc/withErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import { Component, ComponentType, ReactElement } from 'react';
+
+class ErrorBoundary extends Component<
+  {
+    children: ReactElement;
+    fallback: ReactElement;
+  },
+  {
+    hasError: boolean;
+  }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default function withErrorBoundary<T extends Record<string, unknown>>(
+  Component: ComponentType<T>,
+  ErrorComponent: ReactElement,
+) {
+  return function WithErrorBoundary(props: T) {
+    return (
+      <ErrorBoundary fallback={ErrorComponent}>
+        <Component {...props} />
+      </ErrorBoundary>
+    );
+  };
+}

package/src/shared/hoc/withSuspense.tsx

@@ -0,0 +1,14 @@
+import { ComponentType, ReactElement, Suspense } from 'react';
+
+export default function withSuspense<T extends Record<string, unknown>>(
+  Component: ComponentType<T>,
+  SuspenseComponent: ReactElement,
+) {
+  return function WithSuspense(props: T) {
+    return (
+      <Suspense fallback={SuspenseComponent}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
+}

package/src/shared/hooks/useStorage.tsx

@@ -0,0 +1,47 @@
+import { useSyncExternalStore } from 'react';
+import type { BaseStorage } from '@src/shared/storages/base';
+
+type WrappedPromise = ReturnType<typeof wrapPromise>;
+const storageMap: Map<BaseStorage<unknown>, WrappedPromise> = new Map();
+function wrapPromise<R>(promise: Promise<R>) {
+  let status = 'pending';
+  let result: R;
+  const suspender = promise.then(
+    (r) => {
+      status = 'success';
+      result = r;
+    },
+    (e) => {
+      status = 'error';
+      result = e;
+    },
+  );
+
+  return {
+    read() {
+      if (status === 'pending') {
+        throw suspender;
+      } else if (status === 'error') {
+        throw result;
+      } else if (status === 'success') {
+        return result;
+      }
+    },
+  };
+}
+
+export default function useStorage<
+  Storage extends BaseStorage<Data>,
+  Data = Storage extends BaseStorage<infer Data> ? Data : unknown,
+>(storage: Storage) {
+  const _data = useSyncExternalStore<Data | null>(storage.subscribe, storage.getSnapshot);
+
+  if (!storageMap.has(storage)) {
+    storageMap.set(storage, wrapPromise(storage.get()));
+  }
+  if (_data !== null) {
+    storageMap.set(storage, { read: () => _data });
+  }
+
+  return _data ?? (storageMap.get(storage)!.read() as Data);
+}

package/src/shared/storages/base.ts

@@ -0,0 +1,75 @@
+export enum StorageType {
+  Local = 'local',
+  Sync = 'sync',
+  Managed = 'managed',
+  Session = 'session',
+}
+
+type ValueOrUpdate<D> = D | ((prev: D) => Promise<D> | D);
+
+export type BaseStorage<D> = {
+  get: () => Promise<D>;
+  set: (value: ValueOrUpdate<D>) => Promise<void>;
+  getSnapshot: () => D | null;
+  subscribe: (listener: () => void) => () => void;
+};
+
+export function createStorage<D>(key: string, fallback: D, config?: { storageType?: StorageType }): BaseStorage<D> {
+  let cache: D | null = null;
+  let listeners: Array<() => void> = [];
+  const storageType = config?.storageType ?? StorageType.Local;
+
+  const _getDataFromStorage = async (): Promise<D> => {
+    if (chrome.storage[storageType] === undefined) {
+      throw new Error(`Check your storage permission into manifest.json: ${storageType} is not defined`);
+    }
+    const value = await chrome.storage[storageType].get([key]);
+    return value[key] ?? fallback;
+  };
+
+  const _emitChange = () => {
+    listeners.forEach(listener => listener());
+  };
+
+  const set = async (valueOrUpdate: ValueOrUpdate<D>) => {
+    if (typeof valueOrUpdate === 'function') {
+      // eslint-disable-next-line no-prototype-builtins
+      if (valueOrUpdate.hasOwnProperty('then')) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        cache = await valueOrUpdate(cache);
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        cache = valueOrUpdate(cache);
+      }
+    } else {
+      cache = valueOrUpdate;
+    }
+    await chrome.storage[storageType].set({ [key]: cache });
+    _emitChange();
+  };
+
+  const subscribe = (listener: () => void) => {
+    listeners = [...listeners, listener];
+    return () => {
+      listeners = listeners.filter(l => l !== listener);
+    };
+  };
+
+  const getSnapshot = () => {
+    return cache;
+  };
+
+  _getDataFromStorage().then(data => {
+    cache = data;
+    _emitChange();
+  });
+
+  return {
+    get: _getDataFromStorage,
+    set,
+    getSnapshot,
+    subscribe,
+  };
+}

package/src/shared/storages/componentsInfoStorage.ts

@@ -0,0 +1,46 @@
+import type { BaseStorage } from '@src/shared/storages/base';
+import { createStorage, StorageType } from '@src/shared/storages/base';
+
+type ComponentsInfo = {
+  components: number;
+  systems: number;
+  refresh: number;
+};
+
+type ThemeStorage = BaseStorage<ComponentsInfo> & {
+  setStorage: (value: ComponentsInfo) => void;
+  refreshItems: (refresh: number) => void;
+};
+
+const storage = createStorage<ComponentsInfo>(
+  'components-info',
+  {
+    systems: 0,
+    components: 0,
+    refresh: 0,
+  },
+  {
+    storageType: StorageType.Local,
+  },
+);
+
+const componentsInfoStorage: ThemeStorage = {
+  ...storage,
+  setStorage: ({ systems, components, refresh }) => {
+    storage.set((value) => {
+      return {
+        ...value,
+        refresh,
+        systems,
+        components,
+      };
+    });
+  },
+  refreshItems: (refresh) => {
+    storage.set((prev) => {
+      return { ...prev, refresh: refresh };
+    });
+  },
+};
+
+export default componentsInfoStorage;

package/src/shared/style/twind.ts

@@ -0,0 +1,13 @@
+import { twind, cssom, observe } from '@twind/core';
+import 'construct-style-sheets-polyfill';
+import config from '@root/twind.config';
+
+export function attachTwindStyle<T extends { adoptedStyleSheets: unknown }>(
+  observedElement: Element,
+  documentOrShadowRoot: T,
+) {
+  const sheet = cssom(new CSSStyleSheet());
+  const tw = twind(config, sheet);
+  observe(tw, observedElement);
+  documentOrShadowRoot.adoptedStyleSheets = [sheet.target];
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": ".",
+    "allowJs": false,
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "types": ["vite/client", "node"],
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "forceConsistentCasingInFileNames": true,
+    "typeRoots": ["./src/global.d.ts"],
+    "paths": {
+      "@root/*": ["./*"],
+      "@src/*": ["src/*"],
+      "@assets/*": ["src/assets/*"],
+      "@pages/*": ["src/pages/*"],
+      "virtual:reload-on-update-in-background-script": ["./src/global.d.ts"],
+      "virtual:reload-on-update-in-view": ["./src/global.d.ts"]
+    }
+  },
+  "include": ["src", "utils", "vite.config.ts", "node_modules/@types"]
+}

package/twind.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@twind/core';
+import presetTailwind from '@twind/preset-tailwind';
+import presetAutoprefix from '@twind/preset-autoprefix';
+
+export default defineConfig({
+  presets: [presetAutoprefix(), presetTailwind()],
+});

package/utils/checkShopl.ts

@@ -0,0 +1,6 @@
+export const checkShopl = (origin: string) => {
+  if (origin.includes('shoplworks') || origin.includes('localhost')) {
+    return true;
+  }
+  return false;
+};

package/utils/log.ts

@@ -0,0 +1,52 @@
+type ColorType = 'success' | 'info' | 'error' | 'warning' | keyof typeof COLORS;
+const COLORS = {
+  Reset: '\x1b[0m',
+  Bright: '\x1b[1m',
+  Dim: '\x1b[2m',
+  Underscore: '\x1b[4m',
+  Blink: '\x1b[5m',
+  Reverse: '\x1b[7m',
+  Hidden: '\x1b[8m',
+  FgBlack: '\x1b[30m',
+  FgRed: '\x1b[31m',
+  FgGreen: '\x1b[32m',
+  FgYellow: '\x1b[33m',
+  FgBlue: '\x1b[34m',
+  FgMagenta: '\x1b[35m',
+  FgCyan: '\x1b[36m',
+  FgWhite: '\x1b[37m',
+  BgBlack: '\x1b[40m',
+  BgRed: '\x1b[41m',
+  BgGreen: '\x1b[42m',
+  BgYellow: '\x1b[43m',
+  BgBlue: '\x1b[44m',
+  BgMagenta: '\x1b[45m',
+  BgCyan: '\x1b[46m',
+  BgWhite: '\x1b[47m',
+} as const;
+
+type ValueOf<T> = T[keyof T];
+
+export default function colorLog(message: string, type?: ColorType) {
+  let color: ValueOf<typeof COLORS>;
+
+  switch (type) {
+    case 'success':
+      color = COLORS.FgGreen;
+      break;
+    case 'info':
+      color = COLORS.FgBlue;
+      break;
+    case 'error':
+      color = COLORS.FgRed;
+      break;
+    case 'warning':
+      color = COLORS.FgYellow;
+      break;
+    default:
+      color = COLORS[type];
+      break;
+  }
+
+  console.info(color, message);
+}

package/utils/manifest-parser/index.ts

@@ -0,0 +1,35 @@
+type Manifest = chrome.runtime.ManifestV3;
+
+class ManifestParser {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  static convertManifestToString(manifest: Manifest): string {
+    if (process.env.__FIREFOX__) {
+      manifest = this.convertToFirefoxCompatibleManifest(manifest);
+    }
+    return JSON.stringify(manifest, null, 2);
+  }
+
+  static convertToFirefoxCompatibleManifest(manifest: Manifest) {
+    const manifestCopy = {
+      ...manifest,
+    } as { [key: string]: unknown };
+
+    manifestCopy.background = {
+      scripts: [manifest.background?.service_worker],
+      type: 'module',
+    };
+    manifestCopy.options_ui = {
+      page: manifest.options_page,
+      browser_style: false,
+    };
+    manifestCopy.content_security_policy = {
+      extension_pages: "script-src 'self'; object-src 'self'",
+    };
+    delete manifestCopy.options_page;
+    return manifestCopy as Manifest;
+  }
+}
+
+export default ManifestParser;

package/utils/plugins/add-hmr.ts

@@ -0,0 +1,46 @@
+import * as path from 'path';
+import { readFileSync } from 'fs';
+import type { PluginOption } from 'vite';
+
+const isDev = process.env.__DEV__ === 'true';
+
+const DUMMY_CODE = `export default function(){};`;
+
+function getInjectionCode(fileName: string): string {
+  return readFileSync(path.resolve(__dirname, '..', 'reload', 'injections', fileName), { encoding: 'utf8' });
+}
+
+type Config = {
+  background?: boolean;
+  view?: boolean;
+};
+function getResolvedId(id: string) {
+  return '\0' + id;
+}
+
+export default function addHmr(config?: Config): PluginOption {
+  const { background = false, view = true } = config || {};
+  const idInBackgroundScript = 'virtual:reload-on-update-in-background-script';
+  const idInView = 'virtual:reload-on-update-in-view';
+
+  const scriptHmrCode = isDev ? getInjectionCode('script.js') : DUMMY_CODE;
+  const viewHmrCode = isDev ? getInjectionCode('view.js') : DUMMY_CODE;
+
+  return {
+    name: 'add-hmr',
+    resolveId(id) {
+      if (id === idInBackgroundScript || id === idInView) {
+        return getResolvedId(id);
+      }
+    },
+    load(id) {
+      if (id === getResolvedId(idInBackgroundScript)) {
+        return background ? scriptHmrCode : DUMMY_CODE;
+      }
+
+      if (id === getResolvedId(idInView)) {
+        return view ? viewHmrCode : DUMMY_CODE;
+      }
+    },
+  };
+}

package/utils/plugins/custom-dynamic-import.ts

@@ -0,0 +1,34 @@
+import type { PluginOption } from 'vite';
+
+export default function customDynamicImport(): PluginOption {
+  return {
+    name: 'custom-dynamic-import',
+    renderDynamicImport({ moduleId }) {
+      if (!moduleId.includes('node_modules')) {
+        // ↑ dont modify any import from node_modules
+        if (process.env.__FIREFOX__) {
+          return {
+            left: `
+          {
+            const dynamicImport = (path) => import(path);
+            dynamicImport(browser.runtime.getURL('./') + 
+            `,
+            right: ".split('../').join(''))}",
+          };
+        }
+        return {
+          left: `
+          {
+            const dynamicImport = (path) => import(path);
+            dynamicImport(
+            `,
+          right: ')}',
+        };
+      }
+      return {
+        left: 'import(',
+        right: ')',
+      };
+    },
+  };
+}

package/utils/plugins/make-manifest.ts

@@ -0,0 +1,49 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import colorLog from '../log';
+import ManifestParser from '../manifest-parser';
+import type { PluginOption } from 'vite';
+
+// eslint-disable-next-line @typescript-eslint/unbound-method
+const { resolve } = path;
+
+const distDir = resolve(__dirname, '..', '..', 'dist');
+const publicDir = resolve(__dirname, '..', '..', 'public');
+
+export default function makeManifest(
+  manifest: chrome.runtime.ManifestV3,
+  config: { isDev: boolean; contentScriptCssKey?: string },
+): PluginOption {
+  function makeManifest(to: string) {
+    if (!fs.existsSync(to)) {
+      fs.mkdirSync(to);
+    }
+    const manifestPath = resolve(to, 'manifest.json');
+
+    // Naming change for cache invalidation
+    if (config.contentScriptCssKey) {
+      manifest.content_scripts.forEach((script) => {
+        script.css = script.css.map((css) => css.replace('<KEY>', config.contentScriptCssKey));
+      });
+    }
+
+    fs.writeFileSync(manifestPath, ManifestParser.convertManifestToString(manifest));
+
+    colorLog(`Manifest file copy complete: ${manifestPath}`, 'success');
+  }
+
+  return {
+    name: 'make-manifest',
+    buildStart() {
+      if (config.isDev) {
+        makeManifest(distDir);
+      }
+    },
+    buildEnd() {
+      if (config.isDev) {
+        return;
+      }
+      makeManifest(publicDir);
+    },
+  };
+}