TexteaInc · himself65 · Sep 22, 2022 · Sep 22, 2022 · Sep 22, 2022
diff --git a/README.md b/README.md
@@ -107,6 +107,22 @@ const Component = () => (
 
 ![Ocean Theme Preview](docs/public/ocean-theme.png)
 
+### Browser
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<body>
+<div id="json-viewer"></div>
+<script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer"></script>
+<script>
+  new JsonViewer({
+    value: { /* ... */ }
+  }).render()
+</script>
+</body>
+</html>
+```
 
 ## Features
 

diff --git a/package.json b/package.json
@@ -32,6 +32,8 @@
     "treeview"
   ],
   "types": "dist/index.d.ts",
+  "jsdelivr": "dist/browser.js",
+  "browser": "dist/browser.js",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {
@@ -77,6 +79,7 @@
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "@swc/core": "^1.3.2",
     "@testing-library/react": "^13.4.0",
     "@textea/dev-kit": "^0.13.4",

diff --git a/rollup.config.ts b/rollup.config.ts
@@ -4,6 +4,7 @@ import { basename, resolve } from 'node:path'
 import alias from '@rollup/plugin-alias'
 import commonjs from '@rollup/plugin-commonjs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
 import type {
   ModuleFormat,
   OutputOptions,
@@ -34,7 +35,7 @@ const external = [
   'react-dom'
 ]
 const outputMatrix = (
-  name: string, format: ModuleFormat[] = ['es', 'umd']): OutputOptions[] => {
+  name: string, format: ModuleFormat[]): OutputOptions[] => {
   const baseName = basename(name)
   return format.flatMap(format => ({
     file: resolve(outputDir, `${baseName}.${format === 'es' ? 'm' : ''}js`),
@@ -49,20 +50,39 @@ const outputMatrix = (
   }))
 }
 
-const buildMatrix = (input: string, output: string): RollupOptions => {
-  dtsOutput.add([input.replaceAll('.tsx', '.tsx'), output])
+const buildMatrix = (input: string, output: string, config: {
+  format: ModuleFormat[]
+  browser: boolean
+  dts: boolean
+}): RollupOptions => {
+  if (config.dts) {
+    dtsOutput.add([input.replaceAll('.tsx', '.tsx'), output])
+  }
   return {
     input,
-    output: outputMatrix(output),
+    output: outputMatrix(output, config.format),
     cache,
-    external,
+    external: config.browser ? [] : external,
     plugins: [
       alias({
-        entries: [
-          { find: 'react', replacement: '@emotion/react' },
-          { find: 'react/jsx-dev-runtime', replacement: '@emotion/react/jsx-dev-runtime' },
-          { find: 'react/jsx-runtime', replacement: '@emotion/react/jsx-runtime' }
-        ]
+        entries: config.browser
+          ? []
+          : [
+              { find: 'react', replacement: '@emotion/react' },
+              {
+                find: 'react/jsx-dev-runtime',
+                replacement: '@emotion/react/jsx-dev-runtime'
+              },
+              {
+                find: 'react/jsx-runtime',
+                replacement: '@emotion/react/jsx-runtime'
+              }
+            ]
+      }),
+      config.browser && replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        'typeof window': JSON.stringify('object')
       }),
       commonjs(),
       nodeResolve(),
@@ -100,7 +120,16 @@ const dtsMatrix = (): RollupOptions[] => {
 }
 
 const build: RollupOptions[] = [
-  buildMatrix('./src/index.tsx', 'index'),
+  buildMatrix('./src/index.tsx', 'index', {
+    format: ['es', 'umd'],
+    browser: false,
+    dts: true
+  }),
+  buildMatrix('./src/browser.tsx', 'browser', {
+    format: ['es', 'umd'],
+    browser: true,
+    dts: true
+  }),
   ...dtsMatrix()
 ]
 

diff --git a/src/browser.tsx b/src/browser.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { createRoot, Root } from 'react-dom/client'
+
+import { JsonViewer as JsonViewerComponent } from '.'
+import type { JsonViewerProps } from './type'
+
+const getElementFromConfig = (el?: string | Element) => (el
+  ? (typeof el === 'string' ? document.querySelector(el) : el)
+  : document.getElementById('json-viewer'))
+
+export default class JsonViewer {
+  private props: JsonViewerProps
+  private root?: Root
+
+  static Component = JsonViewerComponent
+
+  constructor (props: JsonViewerProps) {
+    this.props = props
+  }
+
+  render (el?: string | Element) {
+    const container = getElementFromConfig(el)
+
+    if (container) {
+      this.root = createRoot(container)
+      this.root.render(<JsonViewerComponent {...this.props}/>)
+    }
+  }
+
+  destroy () {
+    if (this.root) {
+      this.root.unmount()
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1401,6 +1401,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-replace@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@rollup/plugin-replace@npm:4.0.0"
+  dependencies:
+    "@rollup/pluginutils": ^3.1.0
+    magic-string: ^0.25.7
+  peerDependencies:
+    rollup: ^1.20.0 || ^2.0.0
+  checksum: b61701e612661a46da06ca88f390c3839b586708abc0329a476411b90aa8ac59fe94437ede4c3fe53fea268b3054ea9d7d4ee851d7bd0cb7a5f06906002067cb
+  languageName: node
+  linkType: hard
+
 "@rollup/pluginutils@npm:^3.1.0":
   version: 3.1.0
   resolution: "@rollup/pluginutils@npm:3.1.0"
@@ -1698,6 +1710,7 @@ __metadata:
     "@rollup/plugin-alias": ^3.1.9
     "@rollup/plugin-commonjs": ^22.0.2
     "@rollup/plugin-node-resolve": ^14.1.0
+    "@rollup/plugin-replace": ^4.0.0
     "@swc/core": ^1.3.2
     "@testing-library/react": ^13.4.0
     "@textea/dev-kit": ^0.13.4