From ba1fff5c045fe40b6fe0975fba7bd0d605fa546e Mon Sep 17 00:00:00 2001 From: Luca Mattiazzi Date: Fri, 29 Nov 2019 11:44:50 +0100 Subject: [PATCH 1/4] updated readme --- README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/README.md b/README.md index dac5f5f1..2ccf9185 100644 --- a/README.md +++ b/README.md @@ -542,7 +542,10 @@ For simple use-cases you can use [greenlet](https://github.com/developit/greenle Otherwise, you can use the [worker-loader](https://github.com/webpack-contrib/worker-loader) and configure it to read files ending in `.worker.js`. Here is the code: +If you're also using typescript, add `"webworker"` in `tsconfig.json` under `compilerOptions.lib`. + ```js +// weback.config.js const { buildWebpackConfig } = require('webpack-preset-accurapp') function workerLoader() { @@ -556,6 +559,48 @@ module.exports = buildWebpackConfig([ workerLoader(), ]) ``` + +```js +// src/workers/myawesome.worker.ts + +import { get } from 'lodash' +// you can import modules in this worker + +const ctx: Worker = self as any + +// Listen to message from the parent thread +ctx.addEventListener('message', event => { + console.log(event) + // Post data to parent thread + ctx.postMessage({ data: 'maronn' }) +}) +``` + +```js +// src/typings/custom/index.d.ts +declare module 'worker-loader!*' { + class WebpackWorker extends Worker { + constructor() + } + + export = WebpackWorker +} +``` + +```js +// src/index.tsx +import Worker from 'worker-loader!./workers/myawesome.worker.ts' + +const worker = new Worker() + +worker.postMessage({ data: 1000 }) +worker.addEventListener('message', event => { + console.log(event) +}) + +React.dosomethingcool() +``` +
From e08b7729fb2ed41f46c58b203ec1dbc57a18761f Mon Sep 17 00:00:00 2001 From: Luca Mattiazzi Date: Mon, 2 Dec 2019 11:05:51 +0100 Subject: [PATCH 2/4] fix: corrected readme, added globalthis to webpack presets --- README.md | 68 ++++++++++++----------- packages/webpack-preset-accurapp/index.js | 4 ++ 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 2ccf9185..e5728b1a 100644 --- a/README.md +++ b/README.md @@ -16,30 +16,32 @@ but significant amounts of code were rewritten and simplified. Here are some shi - **JSON5 webpack loader** to import .json5 files. [Read more about JSON5 here](https://json5.org/). ## Table of contents +- [!Accurapp](#accurapp) +- [Table of contents](#table-of-contents) - [Creating a new project](#creating-a-new-project) + - [Setting up github](#setting-up-github) + - [Setting up the automatic deploy](#setting-up-the-automatic-deploy) + - [Commands](#commands) - [Customization](#customization) - - [Customizing Webpack](#customizing-webpack) - - [Customizing Eslint](#customizing-eslint) - - [Customizing Babel](#customizing-babel) - - [Setting Env Variables](#setting-env-variables) - - [Customizing Env Variables](#customizing-env-variables) + - [Customizing Webpack](#customizing-webpack) + - [Customizing Eslint](#customizing-eslint) + - [Customizing Babel](#customizing-babel) + - [Setting Env Variables](#setting-env-variables) + - [Customizing Env Variables](#customizing-env-variables) - [Available Env Variables](#available-env-variables) - [Project Scaffolding](#project-scaffolding) - [F.A.Q.](#faq) - - [How do I enable hot reloading for the state?](#faq) - - [Where do I put the images?](#faq) - - [Where do I put the custom fonts?](#faq) - - [What is the public folder for?](#faq) - - [How do I handle svg files?](#faq) - - [How do I enable TypeScript?](#faq) - - [How do I override a webpack loader?](#faq) - - [What's all the fuss about FUSS?](#faq) - - [How do I enable prettier?](#faq) - - [I need to support IE11. What do I do?](#faq) - - [How do I use a web worker?](#faq) - - [How do I use a service worker?](#faq) - - [I need title and meta tags for each route for SEO. How do I do it?](#faq) - - [I need to build for Electron. How do I do it?](#faq) +- [Install `react-helmet` and `react-snap`](#install-react-helmet-and-react-snap) +- [Add meta tags for each route in the `render` function](#add-meta-tags-for-each-route-in-the-render-function) +- [Add `react-snap` in `src/index.js`](#add-react-snap-in-srcindexjs) +- [Add `react-snap` to `package.json`](#add-react-snap-to-packagejson) +- [Add the `react-snap` config in `bitbucket-pipelines.yml`](#add-the-react-snap-config-in-bitbucket-pipelinesyml) +- [OK, setup done! Now, how do I check if it is working?](#ok-setup-done-now-how-do-i-check-if-it-is-working) +- [Basic troubleshooting: `react-snap` works properly, but no links are found](#basic-troubleshooting-react-snap-works-properly-but-no-links-are-found) +- [Basic troubleshooting: I get a weird error for 404 pages](#basic-troubleshooting-i-get-a-weird-error-for-404-pages) +- [Basic troubleshooting: There is unknown code in my built index.html. Is it malicious? How do I remove it?](#basic-troubleshooting-there-is-unknown-code-in-my-built-indexhtml-is-it-malicious-how-do-i-remove-it) +- [Further troubleshooting](#further-troubleshooting) +- [What goes in the ``?](#what-goes-in-the-head) - [Contributing](#contributing) ## Creating a new project @@ -540,19 +542,19 @@ You still have some css fixes to do, for example flexbox behaves weirdly, [here For simple use-cases you can use [greenlet](https://github.com/developit/greenlet) which lets you write javascript functions in the main code and then runs them in a web worker. -Otherwise, you can use the [worker-loader](https://github.com/webpack-contrib/worker-loader) and configure it to read files ending in `.worker.js`. Here is the code: - -If you're also using typescript, add `"webworker"` in `tsconfig.json` under `compilerOptions.lib`. +Otherwise, you can use the [worker-loader](https://github.com/webpack-contrib/worker-loader) and configure it to read files ending in `.worker.js` or `.worker.ts` for typescript files. Here is the code: ```js // weback.config.js const { buildWebpackConfig } = require('webpack-preset-accurapp') function workerLoader() { - return (context, { addLoader }) => addLoader({ - test: /\.worker\.js$/, - loader: 'worker-loader', - }) + return (context, { addLoader }) => + addLoader({ + test: /\.worker\.(js|ts)$/, + loader: 'worker-loader', + enforce: 'post', + }) } module.exports = buildWebpackConfig([ @@ -560,7 +562,7 @@ module.exports = buildWebpackConfig([ ]) ``` -```js +```ts // src/workers/myawesome.worker.ts import { get } from 'lodash' @@ -576,9 +578,11 @@ ctx.addEventListener('message', event => { }) ``` -```js -// src/typings/custom/index.d.ts -declare module 'worker-loader!*' { +```ts +// src/types.d.ts + +/// +declare module '*.worker.ts' { class WebpackWorker extends Worker { constructor() } @@ -587,9 +591,9 @@ declare module 'worker-loader!*' { } ``` -```js +```tsx // src/index.tsx -import Worker from 'worker-loader!./workers/myawesome.worker.ts' +import Worker from './workers/myawesome.worker.ts' const worker = new Worker() diff --git a/packages/webpack-preset-accurapp/index.js b/packages/webpack-preset-accurapp/index.js index ef179a2d..b20c6568 100644 --- a/packages/webpack-preset-accurapp/index.js +++ b/packages/webpack-preset-accurapp/index.js @@ -164,6 +164,10 @@ function buildWebpackConfig(config = []) { }, }), + // Necessary for using webworker, won't change anything important even + // when not used. + setOutput({ globalObject: 'this' }), + addPlugins([ // Like webpack.DefinePlugin, but also reads the .env file, giving however priority to // the envs already there (like variable set from the command line or CI). From 9a9b291b2562b7048e94042b203c35c051eca231 Mon Sep 17 00:00:00 2001 From: Marco Fugaro Date: Mon, 2 Dec 2019 12:05:17 +0100 Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=F0=9F=93=96=20Readme=20formatting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index e5728b1a..29c00430 100644 --- a/README.md +++ b/README.md @@ -16,32 +16,30 @@ but significant amounts of code were rewritten and simplified. Here are some shi - **JSON5 webpack loader** to import .json5 files. [Read more about JSON5 here](https://json5.org/). ## Table of contents -- [!Accurapp](#accurapp) -- [Table of contents](#table-of-contents) - [Creating a new project](#creating-a-new-project) - - [Setting up github](#setting-up-github) - - [Setting up the automatic deploy](#setting-up-the-automatic-deploy) - - [Commands](#commands) - [Customization](#customization) - - [Customizing Webpack](#customizing-webpack) - - [Customizing Eslint](#customizing-eslint) - - [Customizing Babel](#customizing-babel) - - [Setting Env Variables](#setting-env-variables) - - [Customizing Env Variables](#customizing-env-variables) + - [Customizing Webpack](#customizing-webpack) + - [Customizing Eslint](#customizing-eslint) + - [Customizing Babel](#customizing-babel) + - [Setting Env Variables](#setting-env-variables) + - [Customizing Env Variables](#customizing-env-variables) - [Available Env Variables](#available-env-variables) - [Project Scaffolding](#project-scaffolding) - [F.A.Q.](#faq) -- [Install `react-helmet` and `react-snap`](#install-react-helmet-and-react-snap) -- [Add meta tags for each route in the `render` function](#add-meta-tags-for-each-route-in-the-render-function) -- [Add `react-snap` in `src/index.js`](#add-react-snap-in-srcindexjs) -- [Add `react-snap` to `package.json`](#add-react-snap-to-packagejson) -- [Add the `react-snap` config in `bitbucket-pipelines.yml`](#add-the-react-snap-config-in-bitbucket-pipelinesyml) -- [OK, setup done! Now, how do I check if it is working?](#ok-setup-done-now-how-do-i-check-if-it-is-working) -- [Basic troubleshooting: `react-snap` works properly, but no links are found](#basic-troubleshooting-react-snap-works-properly-but-no-links-are-found) -- [Basic troubleshooting: I get a weird error for 404 pages](#basic-troubleshooting-i-get-a-weird-error-for-404-pages) -- [Basic troubleshooting: There is unknown code in my built index.html. Is it malicious? How do I remove it?](#basic-troubleshooting-there-is-unknown-code-in-my-built-indexhtml-is-it-malicious-how-do-i-remove-it) -- [Further troubleshooting](#further-troubleshooting) -- [What goes in the ``?](#what-goes-in-the-head) + - [How do I enable hot reloading for the state?](#faq) + - [Where do I put the images?](#faq) + - [Where do I put the custom fonts?](#faq) + - [What is the public folder for?](#faq) + - [How do I handle svg files?](#faq) + - [How do I enable TypeScript?](#faq) + - [How do I override a webpack loader?](#faq) + - [What's all the fuss about FUSS?](#faq) + - [How do I enable prettier?](#faq) + - [I need to support IE11. What do I do?](#faq) + - [How do I use a web worker?](#faq) + - [How do I use a service worker?](#faq) + - [I need title and meta tags for each route for SEO. How do I do it?](#faq) + - [I need to build for Electron. How do I do it?](#faq) - [Contributing](#contributing) ## Creating a new project @@ -546,6 +544,7 @@ Otherwise, you can use the [worker-loader](https://github.com/webpack-contrib/wo ```js // weback.config.js + const { buildWebpackConfig } = require('webpack-preset-accurapp') function workerLoader() { @@ -565,8 +564,8 @@ module.exports = buildWebpackConfig([ ```ts // src/workers/myawesome.worker.ts +// You can import modules in this worker import { get } from 'lodash' -// you can import modules in this worker const ctx: Worker = self as any @@ -582,6 +581,7 @@ ctx.addEventListener('message', event => { // src/types.d.ts /// + declare module '*.worker.ts' { class WebpackWorker extends Worker { constructor() @@ -593,6 +593,7 @@ declare module '*.worker.ts' { ```tsx // src/index.tsx + import Worker from './workers/myawesome.worker.ts' const worker = new Worker() @@ -601,8 +602,6 @@ worker.postMessage({ data: 1000 }) worker.addEventListener('message', event => { console.log(event) }) - -React.dosomethingcool() ```
From 490cc9c92861cb6e0749ac202f61b0da1c422fb1 Mon Sep 17 00:00:00 2001 From: Marco Fugaro Date: Mon, 2 Dec 2019 12:07:38 +0100 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=F0=9F=94=A8=20Update=20comment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-preset-accurapp/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/webpack-preset-accurapp/index.js b/packages/webpack-preset-accurapp/index.js index b20c6568..d30efe78 100644 --- a/packages/webpack-preset-accurapp/index.js +++ b/packages/webpack-preset-accurapp/index.js @@ -164,8 +164,7 @@ function buildWebpackConfig(config = []) { }, }), - // Necessary for using webworker, won't change anything important even - // when not used. + // Needed for the worker-loader. setOutput({ globalObject: 'this' }), addPlugins([