@rsdoctor/client 0.0.2-beta.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@rsdoctor/client",
+  "version": "0.0.2-beta.0",
+  "main": "dist/index.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rsdoctor",
+    "directory": "packages/client"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "devDependencies": {
+    "@rsbuild/core": "0.1.9",
+    "@rsbuild/plugin-react": "0.1.9",
+    "@rsbuild/plugin-node-polyfill": "0.1.9",
+    "@rsbuild/plugin-type-check": "0.1.9",
+    "@types/node": "^16",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/serve-static": "1.15.0",
+    "@types/webpack": "5.28.0",
+    "antd": "5.8.3",
+    "normalize.css": "8.0.1",
+    "react": "^18",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "^4.0.11",
+    "react-router-dom": "6.4.3",
+    "serve-static": "1.15.0",
+    "typescript": "^5.2.2",
+    "@rsdoctor/components": "0.0.2-beta.0",
+    "@rsdoctor/types": "0.0.2-beta.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "rsbuild dev",
+    "start": "rsbuild dev",
+    "build": "rsbuild build",
+    "build:analysis": "ENABLE_DEVTOOLS_PLUGIN=true DEVTOOLS_DEV=true rsbuild build",
+    "preview": "rsbuild preview"
+  }
+}

package/rsbuild.config.ts

@@ -0,0 +1,163 @@
+import type { Compiler } from 'webpack';
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
+import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
+import serve from 'serve-static';
+import path from 'path';
+import fs from 'fs';
+import {
+  ClientEntry,
+  DistPath,
+  PortForCLI,
+  PortForWeb,
+  WebpackDoctorDirPath,
+  WebpackStatsFilePath,
+} from './config/constants';
+
+const {
+  ENABLE_DEVTOOLS_PLUGIN,
+  OFFICAL_PREVIEW_PUBLIC_PATH,
+  OFFICAL_DEMO_MANIFEST_PATH,
+  ENABLE_CLIENT_SERVER,
+} = process.env;
+
+export default defineConfig((env) => {
+  const IS_PRODUCTION = env.env === 'production';
+
+  return {
+    plugins: [
+      pluginReact(),
+      pluginNodePolyfill(),
+      pluginTypeCheck({ enable: IS_PRODUCTION }),
+    ],
+
+    source: {
+      entry: {
+        index: ClientEntry,
+      },
+      define: {
+        'process.env.NODE_DEBUG': JSON.stringify(false),
+        'process.env.NODE_ENV': JSON.stringify(env.env),
+        'process.env.OFFICAL_DEMO_MANIFEST_PATH': JSON.stringify(
+          OFFICAL_DEMO_MANIFEST_PATH,
+        ),
+        'process.env.LOCAL_CLI_PORT': JSON.stringify(PortForCLI),
+      },
+    },
+
+    output: {
+      distPath: {
+        root: path.basename(DistPath),
+        js: 'resource/js',
+        css: 'resource/css',
+        svg: 'resource/svg',
+        font: 'resource/font',
+        image: 'resource/image',
+        media: 'resource/media',
+      },
+      assetPrefix: IS_PRODUCTION
+        ? OFFICAL_PREVIEW_PUBLIC_PATH?.replace(/\/resource$/, '') || '/'
+        : '/',
+      cleanDistPath: IS_PRODUCTION,
+      disableTsChecker: !IS_PRODUCTION,
+      disableSourceMap: true,
+      disableMinimize: !IS_PRODUCTION,
+    },
+
+    performance: {
+      chunkSplit: {
+        strategy: 'custom',
+        splitChunks: {
+          cacheGroups: {
+            monaco: {
+              test: /node_modules\/monaco-editor\/*/,
+              name: 'monaco',
+              chunks: 'all',
+              maxSize: 1000000,
+              minSize: 500000,
+            },
+          },
+        },
+      },
+    },
+
+    tools: {
+      bundlerChain: (chainConfig) => {
+        if (ENABLE_DEVTOOLS_PLUGIN) {
+          const { RsdoctorRspackPlugin } =
+            require('../rspack-plugin/dist') as typeof import('../rspack-plugin/dist');
+
+          class StatsWriter {
+            apply(compiler: Compiler) {
+              compiler.hooks.done.tapPromise(
+                { name: 'webpack-stats-json-writer', stage: 99999 },
+                async (stats) => {
+                  const json = stats.toJson({
+                    all: false,
+                    assets: true,
+                    chunks: true,
+                    modules: true,
+                    builtAt: true,
+                    hash: true,
+                    ids: true,
+                    version: true,
+                    entrypoints: true,
+                  });
+                  await fs.promises.writeFile(
+                    WebpackStatsFilePath,
+                    JSON.stringify(json, null, 2),
+                    'utf-8',
+                  );
+                },
+              );
+            }
+          }
+
+          chainConfig.plugin('stats-writer').use(StatsWriter);
+          chainConfig.plugin('rsdoctor').use(RsdoctorRspackPlugin, [
+            {
+              disableClientServer: !ENABLE_CLIENT_SERVER,
+              features: {
+                loader: true,
+                plugins: true,
+                resolver: true,
+                bundle: true,
+                treeShaking: true,
+              },
+            },
+          ]);
+        }
+      },
+
+      devServer: {
+        historyApiFallback: true,
+        setupMiddlewares: [
+          (middlewares) => {
+            if (fs.existsSync(WebpackDoctorDirPath)) {
+              const fn = serve(WebpackDoctorDirPath, {
+                index: false,
+                setHeaders(res) {
+                  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+                },
+              });
+              middlewares.push(fn);
+            }
+          },
+        ],
+      },
+    },
+
+    html: {
+      title: 'Rsdoctor',
+    },
+
+    server: {
+      port: PortForWeb,
+    },
+
+    dev: {
+      startUrl: ENABLE_CLIENT_SERVER ? undefined : true,
+    },
+  };
+});

package/src/App.tsx

@@ -0,0 +1,147 @@
+import { Constants } from '@rsdoctor/components';
+import { Config, ConfigContext, defaultConfig } from '@rsdoctor/components/config';
+import { Layout } from '@rsdoctor/components/elements';
+import { getDemoUrl, getLocale, setThemeToStorage, setViewModeToStorage, useDetectIfCloudIdeEnv } from '@rsdoctor/components/utils';
+import type { Manifest } from '@rsdoctor/types';
+import { Alert, Button, ConfigProvider, Divider, Result, Space, Typography, theme as te } from 'antd';
+import React, { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { HashRouter as BrowserRouter } from 'react-router-dom';
+import Router from './router';
+// import UploaderComponent from './pages/Resources/Uploader'; TODO: uploader components
+
+const { PageState, Theme } = Constants;
+
+const App: React.FC = (): React.ReactElement => {
+  const ifCloudIdeEnv = useDetectIfCloudIdeEnv();
+
+  const [state, setState] = useState<Constants.PageState>(PageState.Success);
+  const [viewMode, setViewMode] = useState<Config['viewMode']>({ ...defaultConfig.viewMode });
+  const [manifest, setManifest] = useState<Manifest.DoctorManifest>();
+  const [theme, setTheme] = useState(defaultConfig.theme);
+
+  if (state === Constants.PageState.Fail) {
+    const demoUrl = getDemoUrl();
+    return (
+      <Space direction="vertical" style={{ padding: 14 }}>
+        <Typography.Text strong style={{ fontSize: 16 }}>
+          load json file of Rsdoctor failed.
+        </Typography.Text>
+        <Typography.Text>
+          try to use <Typography.Text keyboard>command + r</Typography.Text> to refresh page.
+        </Typography.Text>
+        {process.env.NODE_ENV === 'development' ? (
+          <Typography.Text>
+            in development, you need to run <Typography.Text keyboard>emo run build:analysis</Typography.Text> to make
+            sure the mock data has been generated.
+          </Typography.Text>
+        ) : null}
+        <Divider />
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Typography.Text style={{ fontSize: 16 }}>
+            you can
+            <Typography.Text strong style={{ fontSize: 'inherit' }}>
+              {' '}
+              upload a file{' '}
+            </Typography.Text>
+            in the area below to analyze your project.
+          </Typography.Text>
+          {/* <UploaderComponent /> */}
+        </Space>
+        <Divider />
+        {demoUrl ? (
+          <Typography.Text style={{ fontSize: 16 }}>
+            or you can open the{' '}
+            <Typography.Text strong style={{ fontSize: 'inherit' }}>
+              <a href={demoUrl} target="_blank" rel="noreferrer">
+                demo
+              </a>
+            </Typography.Text>{' '}
+            to get started with the Rsdoctor.
+          </Typography.Text>
+        ) : null}
+      </Space>
+    );
+  }
+
+  return (
+    <BrowserRouter>
+      <ConfigContext.Provider
+        value={{
+          ...defaultConfig,
+          theme,
+          setTheme: (v) => {
+            setTheme(v);
+            setThemeToStorage(v);
+          },
+          pageState: state,
+          json: manifest!,
+          viewMode,
+          setManifest,
+          setPageState: setState,
+          setViewMode(m, saveStorage = true) {
+            const res = { ...viewMode, ...m };
+            setViewMode(res);
+            saveStorage && setViewModeToStorage(res);
+          },
+        }}
+      >
+        <ConfigContext.Consumer>
+          {(v) => {
+            return (
+              <ConfigProvider
+                locale={getLocale(v.locale)}
+                theme={{
+                  algorithm: theme === Theme.Dark ? te.darkAlgorithm : te.defaultAlgorithm,
+                }}
+              >
+                <Layout>
+                  <>
+                    {ifCloudIdeEnv && (
+                      <Alert
+                        message="Warning"
+                        description={
+                          <a
+                            href={window.location.href.replace(/https/, 'http')}
+                          >{`Please jump to：${window.location.href.replace(/https/, 'http')}`}</a>
+                        }
+                        type="warning"
+                        showIcon
+                        closable
+                      />
+                    )}
+                    <ErrorBoundary
+                      FallbackComponent={({ error, resetErrorBoundary }) => (
+                        <Result
+                          status="error"
+                          title="Sorry, something went wrong."
+                          extra={
+                            <Button type="primary" onClick={resetErrorBoundary} loading={state === PageState.Pending}>
+                              Reload
+                            </Button>
+                          }
+                        >
+                          <Typography.Paragraph>
+                            <Typography.Title level={3}>Error Stack</Typography.Title>
+                            <pre>{error.stack || error.message}</pre>
+                          </Typography.Paragraph>
+                        </Result>
+                      )}
+                      onReset={() => {
+                        window.location.reload();
+                      }}
+                    >
+                      <Router />
+                    </ErrorBoundary>
+                  </>
+                </Layout>
+              </ConfigProvider>
+            );
+          }}
+        </ConfigContext.Consumer>
+      </ConfigContext.Provider>
+    </BrowserRouter>
+  );
+};
+
+export default App;

package/src/common/imgs/connection-point.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 24L43 24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M24 24V16" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M36 32V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 32V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/common/imgs/icon.svg

@@ -0,0 +1,21 @@
+<svg width="106.000000" height="113.000000" viewBox="0 0 106 113" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<rect id="画板 934" width="106.000000" height="113.000000" fill="#FFFFFF" fill-opacity="0.035"/>
+	<g clip-path="url(#clip111_45)">
+		<rect id="矩形 2176" x="22.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#0F0D0D"/>
+		<rect id="矩形 2176" x="22.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#736C6C"/>
+		<rect id="矩形 2176" x="22.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" stroke="#000000" stroke-linejoin="bevel"/>
+		<rect id="矩形 2176" x="49.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#0F0D0D"/>
+		<rect id="矩形 2176" x="49.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#736C6C"/>
+		<rect id="矩形 2176" x="49.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" stroke="#000000" stroke-linejoin="bevel"/>
+		<path id="矢量 943" d="M24.0938 15.8218C24.0938 15.8218 14 11.3477 14 23.2773C14 35.207 26.1123 70 26.1123 70L41 70" stroke="#000000" stroke-width="5.000000"/>
+		<path id="矢量 943" d="M53.9062 15.8218C53.9062 15.8218 64 11.3477 64 23.2773C64 35.207 51.8877 70 51.8877 70L37 70" stroke="#000000" stroke-width="5.000000"/>
+		<path id="矢量 945" d="M40 83.0723C40 94.0781 48.9219 103 59.9277 103L70 103C81.0459 103 90 94.0459 90 83L90 48" stroke="#000000" stroke-width="5.000000"/>
+		<ellipse id="椭圆 54" cx="90.000000" cy="41.500000" rx="11.000000" ry="8.500000" fill="#5092FF"/>
+		<path id="矢量 946" d="M27 72C31.9609 80.7266 34.5361 81.2817 39.4443 80.9219C44.7744 81.2124 47.4326 79.7798 51 72" stroke="#000000" stroke-width="5.000000"/>
+	</g>
+	<defs>
+		<clipPath id="clip111_45">
+			<rect id="画板 934" width="106.000000" height="113.000000" fill="white"/>
+		</clipPath>
+	</defs>
+</svg>

package/src/common/imgs/webpack.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"><path d="m600 0 530.3 300v600l-530.3 300-530.3-300v-600z" fill="#fff"/><path d="m1035.6 879.3-418.1 236.5v-184.2l260.5-143.3zm28.6-25.9v-494.6l-153 88.3v317.9zm-901.5 25.9 418.1 236.5v-184.2l-260.5-143.3zm-28.6-25.9v-494.6l153 88.3v317.9zm17.9-526.6 428.8-242.6v178.1l-274.7 151.1-2.1 1.2zm894.3 0-428.8-242.6v178.1l274.7 151.1 2.1 1.2z" fill="#8ed6fb"/><path d="m580.8 889.7-257-141.3v-280l257 148.4zm36.7 0 257-141.3v-280l-257 148.4zm-276.3-453.7 258-141.9 258 141.9-258 149z" fill="#1c78c0"/></svg>

package/src/common/styles/base.scss

@@ -0,0 +1,6 @@
+@import "normalize.css";
+@import "./theme.scss";
+
+.body {
+  font-size: 12px;
+}

package/src/common/styles/theme.scss

@@ -0,0 +1,3 @@
+// body {
+//   background-color: rgb(247, 245, 245);
+// }

package/src/index.tsx

@@ -0,0 +1,16 @@
+import '@rsdoctor/components/i18n';
+import App from './App';
+import ReactDOM from 'react-dom/client';
+import './common/styles/base.scss';
+import icon from './common/imgs/icon.svg';
+
+const rootElement = document.getElementById('root');
+const root = ReactDOM.createRoot(rootElement!);
+
+root.render(<App />);
+
+const link = document.createElement('link');
+link.setAttribute('type', 'image/x-icon');
+link.setAttribute('rel', 'icon');
+link.setAttribute('href', icon);
+document.head.appendChild(link);

package/src/main.tsx

@@ -0,0 +1,147 @@
+import { Constants } from '@rsdoctor/components';
+import { Config, ConfigContext, defaultConfig } from '@rsdoctor/components/config';
+import { Layout } from '@rsdoctor/components/elements';
+import { getDemoUrl, getLocale, setThemeToStorage, setViewModeToStorage, useDetectIfCloudIdeEnv } from '@rsdoctor/components/utils';
+import type { Manifest } from '@rsdoctor/types';
+import { Alert, Button, ConfigProvider, Divider, Result, Space, Typography, theme as te } from 'antd';
+import React, { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { HashRouter as BrowserRouter } from 'react-router-dom';
+import Router from './router';
+// import UploaderComponent from './pages/Resources/Uploader'; TODO: uploader components
+
+const { PageState, Theme } = Constants;
+
+const Index: React.FC = (): React.ReactElement => {
+  const ifCloudIdeEnv = useDetectIfCloudIdeEnv();
+
+  const [state, setState] = useState<Constants.PageState>(PageState.Success);
+  const [viewMode, setViewMode] = useState<Config['viewMode']>({ ...defaultConfig.viewMode });
+  const [manifest, setManifest] = useState<Manifest.DoctorManifest>();
+  const [theme, setTheme] = useState(defaultConfig.theme);
+
+  if (state === Constants.PageState.Fail) {
+    const demoUrl = getDemoUrl();
+    return (
+      <Space direction="vertical" style={{ padding: 14 }}>
+        <Typography.Text strong style={{ fontSize: 16 }}>
+          load json file of Rsdoctor failed.
+        </Typography.Text>
+        <Typography.Text>
+          try to use <Typography.Text keyboard>command + r</Typography.Text> to refresh page.
+        </Typography.Text>
+        {process.env.NODE_ENV === 'development' ? (
+          <Typography.Text>
+            in development, you need to run <Typography.Text keyboard>emo run build:analysis</Typography.Text> to make
+            sure the mock data has been generated.
+          </Typography.Text>
+        ) : null}
+        <Divider />
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Typography.Text style={{ fontSize: 16 }}>
+            you can
+            <Typography.Text strong style={{ fontSize: 'inherit' }}>
+              {' '}
+              upload a file{' '}
+            </Typography.Text>
+            in the area below to analyze your project.
+          </Typography.Text>
+          {/* <UploaderComponent /> */}
+        </Space>
+        <Divider />
+        {demoUrl ? (
+          <Typography.Text style={{ fontSize: 16 }}>
+            or you can open the{' '}
+            <Typography.Text strong style={{ fontSize: 'inherit' }}>
+              <a href={demoUrl} target="_blank" rel="noreferrer">
+                demo
+              </a>
+            </Typography.Text>{' '}
+            to get started with the Rsdoctor.
+          </Typography.Text>
+        ) : null}
+      </Space>
+    );
+  }
+
+  return (
+    <BrowserRouter>
+      <ConfigContext.Provider
+        value={{
+          ...defaultConfig,
+          theme,
+          setTheme: (v) => {
+            setTheme(v);
+            setThemeToStorage(v);
+          },
+          pageState: state,
+          json: manifest!,
+          viewMode,
+          setManifest,
+          setPageState: setState,
+          setViewMode(m, saveStorage = true) {
+            const res = { ...viewMode, ...m };
+            setViewMode(res);
+            saveStorage && setViewModeToStorage(res);
+          },
+        }}
+      >
+        <ConfigContext.Consumer>
+          {(v) => {
+            return (
+              <ConfigProvider
+                locale={getLocale(v.locale)}
+                theme={{
+                  algorithm: theme === Theme.Dark ? te.darkAlgorithm : te.defaultAlgorithm,
+                }}
+              >
+                <Layout>
+                  <>
+                    {ifCloudIdeEnv && (
+                      <Alert
+                        message="Warning"
+                        description={
+                          <a
+                            href={window.location.href.replace(/https/, 'http')}
+                          >{`Please jump to：${window.location.href.replace(/https/, 'http')}`}</a>
+                        }
+                        type="warning"
+                        showIcon
+                        closable
+                      />
+                    )}
+                    <ErrorBoundary
+                      FallbackComponent={({ error, resetErrorBoundary }) => (
+                        <Result
+                          status="error"
+                          title="Sorry, something went wrong."
+                          extra={
+                            <Button type="primary" onClick={resetErrorBoundary} loading={state === PageState.Pending}>
+                              Reload
+                            </Button>
+                          }
+                        >
+                          <Typography.Paragraph>
+                            <Typography.Title level={3}>Error Stack</Typography.Title>
+                            <pre>{error.stack || error.message}</pre>
+                          </Typography.Paragraph>
+                        </Result>
+                      )}
+                      onReset={() => {
+                        window.location.reload();
+                      }}
+                    >
+                      <Router />
+                    </ErrorBoundary>
+                  </>
+                </Layout>
+              </ConfigProvider>
+            );
+          }}
+        </ConfigContext.Consumer>
+      </ConfigContext.Provider>
+    </BrowserRouter>
+  );
+};
+
+export default Index;

package/src/router.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Overall, BundleSize, LoaderFiles, PluginsAnalyze, ModuleResolve, LoaderTimeline } from '@rsdoctor/components/pages';
+
+
+export default function Router(): React.ReactElement {
+  const routes = [
+    {
+      path: BundleSize.route,
+      element: <BundleSize.Page />,
+    },
+    {
+      path: LoaderFiles.route,
+      element: <LoaderFiles.Page />,
+    },
+    {
+      path: LoaderFiles.route,
+      element: <LoaderFiles.Page />,
+    },
+    {
+      path: PluginsAnalyze.route,
+      element: <PluginsAnalyze.Page />,
+    },
+    {
+      path: ModuleResolve.route,
+      element: <ModuleResolve.Page />,
+    },
+    {
+      path: LoaderTimeline.route,
+      element: <LoaderTimeline.Page />,
+    },
+  ].filter((e) => Boolean(e)) as { path: string; element: JSX.Element }[];
+
+  return (
+    <Routes>
+      <Route path="/" element={<Overall.Page />} />
+      <Route path={Overall.route} element={<Overall.Page />} />
+      {routes.map((e) => (
+        <Route key={e.path} path={e.path} element={e.element} />
+      ))}
+    </Routes>
+  );
+}

package/src/typings/assetsDefinition.d.ts

@@ -0,0 +1,16 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.webp';
+declare module '*.ttf';
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.scss';
+declare module '*.less';
+declare module '*.css';
+declare module '*?__inline';
+declare module '*?__inline=true';
+declare module '*?__inline=false';
+

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@rsdoctor/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "jsx": "react-jsx",
+    "isolatedModules": true,
+    "declaration": true,
+    "composite": true,
+    "outDir": "dist",
+  },
+  "include": ["src", "config"],
+  "exclude": ["**/node_modules"]
+}