Initial commit

mrbenhowl · Dec 19, 2018 · 60e76a0 · 60e76a0
commit 60e76a0
Show file tree

Hide file tree

Showing 15 changed files with 6,124 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": ">0.25%, not ie 11, not op_mini all"
+      }
+    ]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+yarn-error.log
diff --git a/.nvmrc b/.nvmrc
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+## Example of React and worker-plugin (https://github.com/GoogleChromeLabs/worker-plugin)
+
+- Clone repo
+- yarn serve
+- Go to http://localhost:5000
diff --git a/dist/0.worker.js b/dist/0.worker.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,15 @@
+<!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>Worker plugin example</title>
+</head>
+
+<body>
+  <div id="root" />
+<script type="text/javascript" src="main.js"></script></body>
+
+</html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "webpack-worker-plugin-react-example",
+  "version": "0.1.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --hot",
+    "build": "webpack --mode production",
+    "serve": "yarn build && ./node_modules/.bin/serve -s dist",
+    "lint": "yarn standard --fix"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "clean-webpack-plugin": "^1.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "standard": "^12.0.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10",
+    "worker-plugin": "^2.0.1",
+    "serve": "^10.1.1"
+  },
+  "dependencies": {
+    "react": "^16.7.0-alpha.2",
+    "react-dom": "^16.7.0-alpha.2",
+
+    "webpack": "4.26.1"
+  },
+  "standard": {
+    "globals": [
+      "self",
+      "Worker",
+      "addEventListener",
+      "postMessage"
+    ]
+  }
+}
diff --git a/src/components/app/app.component.js b/src/components/app/app.component.js
@@ -0,0 +1,19 @@
+import React from 'react'
+const basicWorker = new Worker('../../workers/basicWorker.js', { type: 'module' })
+
+const App = () => {
+  const postMessageToWorker = () => {
+    basicWorker.postMessage('Bonjour Monsieur worker, it is me the Main Thread.')
+  }
+
+  return (
+    (
+      <>
+        <div>Look in the browser console</div>        
+        <button onClick={postMessageToWorker}>Press me</button>
+      </>
+    )
+  )
+}
+
+export default App
diff --git a/src/components/app/index.js b/src/components/app/index.js
@@ -0,0 +1,3 @@
+import App from './app.component'
+
+export default App
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,15 @@
+<!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>Worker plugin example</title>
+</head>
+
+<body>
+  <div id="root" />
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './components/app'
+
+const Root = () => (
+  <>
+    <App />
+  </>
+)
+
+ReactDOM.render(<Root />, document.getElementById('root'))
diff --git a/src/workers/basicWorker.js b/src/workers/basicWorker.js
@@ -0,0 +1,5 @@
+console.log('*** I AM WORKER ***')
+
+addEventListener('message', event => {
+  console.log('WORKER received this message: ', event.data)
+})
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,31 @@
+const path = require('path')
+
+const HtmlWebPackPlugin = require('html-webpack-plugin')
+const CleanPlugin = require('clean-webpack-plugin')
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: './src/index.html',
+  filename: './index.html'
+})
+
+const WorkerPlugin = require('worker-plugin')
+
+module.exports = {
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'dist'),        
+    globalObject: 'self'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      }
+    ]
+  },
+  plugins: [new CleanPlugin(['dist']), htmlPlugin, new WorkerPlugin()]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import App from './app.component'

		export default App