mrousavy · PhysicsAreBad · Apr 1, 2021 · Apr 1, 2021 · Apr 4, 2021 · Apr 4, 2021
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -2,7 +2,12 @@ const path = require('path');
 const pak = require('../package.json');
 
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    'module:metro-react-native-babel-preset',
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
   plugins: [
     [
       'module-resolver',
@@ -12,5 +17,11 @@ module.exports = {
         },
       },
     ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        regenerator: true,
+      },
+    ],
   ],
 };
diff --git a/example/index.web.tsx b/example/index.web.tsx
@@ -0,0 +1,10 @@
+import { AppRegistry } from 'react-native';
+import App from './src/App';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);
+
+AppRegistry.runApplication(appName, {
+  initialProps: {},
+  rootTag: document.getElementById('app-root'),
+});
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -271,7 +271,7 @@ PODS:
     - React-jsi (= 0.64.0-rc.3)
     - React-perflogger (= 0.64.0-rc.3)
   - React-jsinspector (0.64.0-rc.3)
-  - react-native-mmkv (1.0.10):
+  - react-native-mmkv (1.1.6):
     - MMKV
     - React-Core
   - React-perflogger (0.64.0-rc.3)
@@ -486,7 +486,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 9cafb8520d334de0720e1119b41db4cc16d3fbc9
-  FBReactNativeSpec: c058de5a7f2e339ae2ea345a0790b9578a9aee56
+  FBReactNativeSpec: cf8c2629932b3e64e01c22cb751c90fcd20586ac
   Flipper: c1ad50344bffdce628b1906b48f6e7cd06724236
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: c55b9328b7ab5716e674926835c2bef6acc5c27d
@@ -511,7 +511,7 @@ SPEC CHECKSUMS:
   React-jsi: 0c862d1821e1a6d671a85945b99bee28bc3f7020
   React-jsiexecutor: 3d27b79050df18a753001d77cbf07b960dc4a8d6
   React-jsinspector: 09567a7aa3dcb281caf25eeba87280b1ea3e09f4
-  react-native-mmkv: e649aa5e2f17cb24e50ddf28520932d5bc688bc6
+  react-native-mmkv: 1d21be7e3a7d5c6be1c15120453de4e9452da1cb
   React-perflogger: d9815e398aa6e6016b8c0bef8b3033ab818f823d
   React-RCTActionSheet: 1ec7b3130b7878d5f818c105eeda38d25f1ebab1
   React-RCTAnimation: 26c31a4da3b7ac12c501fc82d43894f9beabe11a

diff --git a/example/package.json b/example/package.json
@@ -6,21 +6,37 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "web": "cd web && webpack serve",
     "start": "react-native start"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.14.1",
     "react": "17.0.1",
-    "react-native": "0.64.0-rc.3"
+    "react-dom": "^17.0.2",
+    "react-native": "0.64.0-rc.3",
+    "react-native-web": "^0.15.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.13.14",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/runtime": "^7.13.10",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@types/react": "^17.0.3",
+    "@types/react-native": "^0.64.2",
     "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "eslint": "7.14.0",
+    "html-webpack-plugin": "^5.3.1",
     "metro-react-native-babel-preset": "^0.64.0",
-    "react-native-codegen": "^0.0.7"
+    "react-native-codegen": "^0.0.7",
+    "react-native-typescript-transformer": "^1.2.13",
+    "typescript": "^4.2.3",
+    "webpack": "^5.30.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }
diff --git a/example/web/index.html b/example/web/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>
+      RN MMKV Web
+    </title>
+  </head>
+  <body>
+    <div id="app-root"></div>
+  </body>
+</html>
diff --git a/example/web/webpack.config.js b/example/web/webpack.config.js
@@ -0,0 +1,58 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const rootDir = path.join(__dirname, '..');
+const webpackEnv = process.env.NODE_ENV || 'development';
+
+module.exports = {
+  mode: webpackEnv,
+  entry: {
+    app: path.join(rootDir, './index.web.tsx'),
+    vendor: ['react', 'react-dom'],
+  },
+  output: {
+    path: path.resolve(rootDir, 'dist'),
+    filename: '[name].js',
+    chunkFilename: '[id].[chunkhash].js',
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|ts|jsx|js|mjs)$/,
+        exclude: /node_modules/,
+        use: {
+          options: {
+            loader: 'babel-loader',
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, './index.html'),
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+  resolve: {
+    extensions: [
+      '.web.tsx',
+      '.web.ts',
+      '.tsx',
+      '.ts',
+      '.web.jsx',
+      '.web.js',
+      '.jsx',
+      '.js',
+    ], // read files in fillowing order
+    alias: Object.assign({
+      'react-native$': 'react-native-web',
+    }),
+  },
+};