chore(deps): update dependency tsbb to v4 #19 rollup to v3 #17

jaywcjlove/tsbb#439

core/package.json

@@ -20,8 +20,8 @@
   "author": "kenny wong <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "build": "rollup -c rollup.config.ts",
-    "watch": "rollup -c rollup.config.ts -w",
+    "build": "rollup -c rollup.config.ts --configPlugin typescript",
+    "watch": "rollup -c rollup.config.ts --configPlugin typescript -w",
     "test": "tsbb test",
     "coverage": "tsbb test --coverage"
   },
@@ -38,11 +38,11 @@
     "dist"
   ],
   "devDependencies": {
-    "@rollup/plugin-commonjs": "~22.0.0",
-    "@rollup/plugin-node-resolve": "~13.3.0",
-    "@rollup/plugin-typescript": "~8.3.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
     "bannerjs": "~2.1.0",
-    "rollup": "^2.74.1",
-    "rollup-plugin-terser": "~7.0.2"
+    "rollup": "^3.0.0"
   }
 }

core/rollup.config.ts

@@ -1,9 +1,12 @@
+import { createRequire } from 'module';
 import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
 import banner from 'bannerjs';
-import pkg from './package.json';
+
+const require = createRequire(import.meta.url);
+const pkg = require('./package.json');
 
 export default [
   {

package.json

@@ -31,10 +31,10 @@
     ]
   },
   "devDependencies": {
-    "husky": "~8.0.0",
-    "lerna": "^5.0.0",
+    "husky": "^8.0.0",
+    "lerna": "^6.0.0",
     "lint-staged": "^13.0.0",
-    "prettier": "~2.7.0",
-    "tsbb": "^3.7.5"
+    "prettier": "^2.8.0",
+    "tsbb": "^4.0.0"
   }
 }

www/package.json

@@ -16,7 +16,7 @@
     "@wcj/generate-password": "1.0.3",
     "markdown-react-code-preview-loader": "^2.1.2",
     "react": "^18.1.0",
-    "react-code-preview-layout": "^2.0.5",
+    "react-code-preview-layout": "^3.0.0",
     "react-dom": "^18.1.0",
     "styled-components": "^5.3.5"
   },

www/src/Markdown.tsx

@@ -5,6 +5,10 @@ import { getMetaId, CodeBlockData, isMeta, getURLParameters } from 'markdown-rea
 import styled from 'styled-components';
 import { Element, Root } from 'react-markdown/lib/ast-to-react';
 
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
 const StyleWarpper = styled.div`
   max-width: 720px;
   margin: 0 auto;
@@ -43,8 +47,12 @@ const CodePreview: any = ({ inline, data, node, ...props }: CodePreviewProps) =>
     const code = data.data[metaId].value || '';
     const param = getURLParameters(meta);
     return (
-      <CodeLayout ref={$dom} toolbar={param.title || 'Example'} code={<pre {...rest} />} text={code}>
-        <Child />
+      <CodeLayout>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar>{param.title || 'Code Example'}</Toolbar>
+        <Code>{code}</Code>
       </CodeLayout>
     );
   }