fix: replace Snowpack with Vite in integrations/react

Snowpack is broken by FredKSchott/snowpack#3281
rossng · Jul 11, 2021 · dbe386d · dbe386d
1 parent 8557bec
commit dbe386d
Show file tree

Hide file tree

Showing 9 changed files with 1,836 additions and 5,038 deletions.
diff --git a/integrations/react/index.html b/integrations/react/index.html
@@ -8,6 +8,6 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/test/src/index.js"></script>
+    <script type="module" src="/test/src/index.tsx"></script>
   </body>
 </html>
diff --git a/integrations/react/package-lock.json b/integrations/react/package-lock.json
diff --git a/integrations/react/package.json b/integrations/react/package.json
@@ -21,24 +21,25 @@
   },
   "scripts": {
     "build": "rimraf dist && npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc --target es5 --module commonjs --outDir dist/cjs",
-    "build:esm": "tsc --target es6 --module es6 --outDir dist/esm",
-    "serve": "snowpack dev"
+    "build:cjs": "tsc --target es5 --module commonjs --outDir dist/cjs --project tsconfig.build.json",
+    "build:esm": "tsc --target es6 --module es6 --outDir dist/esm --project tsconfig.build.json",
+    "serve": "concurrently vite \"npm run lint\"",
+    "lint": "tsc --project tsconfig.json --watch"
   },
   "dependencies": {
     "@seznam/compose-react-refs": "^1.0.4",
     "@vime/core": "5.0.30"
   },
   "devDependencies": {
-    "@snowpack/plugin-react-refresh": "^2.3.9",
-    "@snowpack/plugin-typescript": "^1.1.1",
-    "@types/react": "^16.9.9",
-    "@types/react-dom": "^16.9.9",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@vitejs/plugin-react-refresh": "^1.3.5",
+    "concurrently": "^6.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "snowpack": "^2.0.0",
-    "typescript": "^4.0.2"
+    "typescript": "^4.3.5",
+    "vite": "^2.4.1"
   },
   "peerDependencies": {
     "react": "^17.0.0",

diff --git a/integrations/react/snowpack.config.js b/integrations/react/snowpack.config.js
diff --git a/integrations/react/test/src/App.tsx b/integrations/react/test/src/App.tsx
@@ -41,7 +41,11 @@ function App() {
 
   return (
     <div id="container">
-      <Player playsinline ref={player} onVmPlaybackReady={onPlaybackReady}>
+      <Player
+        playsinline={true}
+        ref={player}
+        onVmPlaybackReady={onPlaybackReady}
+      >
         {/* YOUTUBE */}
         {/* <Youtube videoId="DyTCOwB0DVw" /> */}
 

diff --git a/integrations/react/tsconfig.build.json b/integrations/react/tsconfig.build.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "removeComments": false,
+    "sourceMap": true,
+    "declarationDir": "dist/types",
+    "inlineSources": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "compileOnSave": false,
+  "buildOnSave": false
+}
diff --git a/integrations/react/tsconfig.json b/integrations/react/tsconfig.json
@@ -1,14 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "declaration": true,
-    "removeComments": false,
-    "sourceMap": true,
-    "declarationDir": "dist/types",
-    "inlineSources": true,
-    "skipLibCheck": true
+    "noEmit": true,
+    "module": "ES2020",
+    "noUnusedLocals": false,
+    "jsx": "preserve",
+    "preserveWatchOutput": true,
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "compileOnSave": false,
-  "buildOnSave": false
+  "include": ["src/**/*.ts", "src/**/*.tsx", "test/**/*.ts", "test/**/*.tsx"]
 }
diff --git a/integrations/react/tsconfig.snowpack.json b/integrations/react/tsconfig.snowpack.json
diff --git a/integrations/react/vite.config.js b/integrations/react/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh()],
+});