The recommended Code Splitting library for React ✂️✨

Overview

loadable-components

React code splitting made easy. Reduce your bundle size without stress ✂️ .

License npm package npm downloads Build Status Code style Dependencies DevDependencies Small size

npm install @loadable/component

Docs

See the documentation at loadable-components.com for more information about using Loadable Components!

Quicklinks to some of the most-visited pages:

Example

import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

Supporting Loadable Components

Loadable Components is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:

License

Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See LICENSE for more information.

Comments
  • loadable not working in SSR with webpack module federation -

    loadable not working in SSR with webpack module federation -

    🐛 Bug Report

    loadable-components: failed to synchronously load component, which expected to be available { fileName: './src/shared/dedicated/index.js', chunkName: 'Dedicated', error: 'Cannot read property 'call' of undefined' } (node:7562) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'call' of undefined at webpack_require (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/main.js:394:42) at Module../src/shared/components/Footer/index.js (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/Dedicated.server.js:21:71) at webpack_require (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/main.js:394:42) at Module../src/shared/dedicated/index.js (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/Dedicated.server.js:60:76) at webpack_require (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/main.js:394:42) at Object.requireSync (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/src_server_render_js.server.js:225:14) at InnerLoadable.loadSync (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/vendors-node_modules_loadable_server_lib_index_js-node_modules_express_index_js-node_modules_-ee7ccd.js:420:35) at new InnerLoadable (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/vendors-node_modules_loadable_server_lib_index_js-node_modules_express_index_js-node_modules_-ee7ccd.js:315:17) at processChild (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/vendors-node_modules_loadable_server_lib_index_js-node_modules_express_index_js-node_modules_-ee7ccd.js:56603:14) at resolve (/Users/ajay/Desktop/WebStrom/MicroFrontend/Edge/dist/server/vendors-node_modules_loadable_server_lib_index_js-node_modules_express_index_js-node_modules_-ee7ccd.js:56568:5) (node:7562) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:7562) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

    To Reproduce

    routes.js -

    import React from 'react' import loadable from '@loadable/component' // import Home from './home' // import Dedicated from './dedicated'

    const Home = loadable(() => import(/* webpackChunkName: "Home" / './home')) const Dedicated = loadable( () => import(/ webpackChunkName: "Dedicated" */ './dedicated'))

    const homeRoute = (path) => ({ path, exact: true, component: Home })

    const dedicatedRoute = (path) => ({ path, exact: true, component: Dedicated })

    export default () => [ homeRoute('/'), dedicatedRoute('/:player(messi)') ]

    Expected behavior

    A clear and concise description of what you expected to happen.

    Link to repl or repo (highly encouraged)

    https://github.com/ajayjaggi/MicroForntEnd-Basic-Structure

    Issues without a reproduction link are likely to stall.

    wontfix 
    opened by ajayjaggi 99
  • Add support for named exports

    Add support for named exports

    Summary

    See https://github.com/gregberge/loadable-components/issues/245

    Currently to create a loadable component, the module that is asynchronously loaded must export the component as the default export (or be a commonjs module exporting the component as module.exports). This is problematic/limiting because:

    • There are good reasons to avoid default exports (prevents grepping a codebase to find usages of an export, prevents import auto completion from working in most/all IDEs)
    • It is not possible to make multiple loadable components using the same split point (instead one must hard code chunk names with webpack "magic comments" - not a standard feature)

    Detailed choices

    See https://github.com/gregberge/loadable-components/issues/245 for preliminary discussion of the API

    • loadable and loadable.lib still accept the import creator as the first argument. This means that for the common/simple case of loadable(() => import('./xyz')), there is no breaking change, instead options are added.
    • resolveComponent is optional and defaults to the existing behaviour. Again, no breaking change, but typescript type inference (for the props of the loadable component) does not work unless it is specified. I think this is a consequence of the CommonJS compatibility.

    Benefits

    Ability to use named exports (including on the server side)

    Use resolveComponent to select the export

    Ability to create multiple loadable components from a single split point

    // split.tsx
    import React from 'react';
    
    type Props1 = {
      prop1: string;
    };
    
    export const Component1 ({ prop1 }: Props1): JSX.Element => (
      <span>{prop1}</span>
    );
    
    type Props2 = {
      prop2: string;
    };
    
    export const Component2 ({ prop2 }: Props2): JSX.Element => (
      <span>{prop2}</span>
    );
    
    import loadable from '@loadable/component';
    
    const LoadableComponent1 = loadable(() => import('./testComponent'), {
      resolveComponent: (mod) => mod.Component1,
    });
    
    const LoadableComponent2 = loadable(() => import('./testComponent'), {
      resolveComponent: (mod) => mod.Component2,
    });
    

    resloveComponent has access to props

    import loadable from '@loadable/component';
    const DynamicLoadableComponent = loadable(() => import('./xyz'), {
      resolveComponent: (mod, props) => mod[props.export],
    });
    

    Typescript type inference

    When using resolveComponent, typescript is able to infer the type of the Props of the loadable component (previously they were always unknown). I think the default type/implementation of resolveComponent breaks type inference somehow by supporting commonjs default exports.

    Before

    // testComponent.tsx
    import React from 'react';
    
    type TestProps = {
      prop1: string;
    };
    
    export default ({ prop1 }: TestProps): JSX.Element => (
      <span>{prop1}</span>
    );
    
    // loadableTestComponent.ts
    import loadable from '@loadable/component';
    
    // Inferred type: `LoadableComponent<unknown>`  :(
    const LoadableComponent = loadable(() => import('./testComponent'));
    

    After

    // testComponent.tsx
    import React from 'react';
    
    type TestProps = {
      prop1: string;
    };
    
    export default ({ prop1 }: TestProps): JSX.Element => (
      <span>{prop1}</span>
    );
    
    // loadableTestComponent.ts
    import loadable from '@loadable/component';
    
    // Inferred type: `LoadableComponent<TestProps>` :)
    const LoadableComponent = loadable(() => import('./testComponent'), {
      resolveComponent: (mod) => mod.default,
    });
    

    Test plan

    Existing tests have been changed where necessary and new tests have been added for new functionality

    opened by hedgepigdaniel 59
  • TypeScript custom transformer for SSR

    TypeScript custom transformer for SSR

    🚀 Feature Proposal

    Hi. Thanks for this great tool.

    Do you have any plan to provide a TypeScript custom transformer such as @loadable/babel-plugin ?

    Motivation

    I'm working with a project using React/SSR/TypeScript. So we use not babel-loader but ts-loader with webpack. We're considering to introduce loadable-components but we don't want install Babel tools.

    Example

    /* webpack.config.js */
    const loadableComponentsTransformer = require('@loadable/ts-transformer');
    
    module.exports = {
        ...
        module: {
          rules: [
            {
              test: /\.tsx?$/,
              exclude: /node_modules/,
              loader: "ts-loader",
              options: {
                getCustomTransformers: () => ({ before: [loadableComponentsTransformer] }),
              },
            },
          ],
        },
        ...
    };
    

    See also https://github.com/TypeStrong/ts-loader#getcustomtransformers--program-program---before-transformerfactory-after-transformerfactory-- .

    Pitch

    Why does this feature belong in the Loadable Component ecosystem?

    wontfix enhancement ✨ 
    opened by Quramy 58
  • Support Webpack 5

    Support Webpack 5

    🐛 Bug Report

    When I build with webpack 5.0.0-rc.0, I have an error TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object, because in loadable-stats.json field assets generated as

     "assets": [{ "name": "assetname.js" }]
    

    but chunkExtractor expects

    "assets": ["assetname.js"]
    

    To Reproduce

    Steps to reproduce the behavior:

    1. Use webpack 5.0.0-rc.0
    2. loadable-stats:
     "assets": [
            {
              "name": "assetname.js"
            }
      ]
    

    Expected behavior

    Support new schema of assets

    ## System:
     - OS: macOS 10.15.6
     - CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
     - Memory: 1.45 GB / 16.00 GB
     - Shell: 5.7.1 - /bin/zsh
    ## Binaries:
     - Node: 14.9.0 - ~/.nvm/versions/node/v14.9.0/bin/node
     - Yarn: 1.22.4 - /usr/local/bin/yarn
     - npm: 6.14.8 - ~/.nvm/versions/node/v14.9.0/bin/npm
    ## npmPackages:
     - @loadable/babel-plugin: 5.13.2 => 5.13.2 
     - @loadable/component: 5.13.2 => 5.13.2 
     - @loadable/server: 5.13.2 => 5.13.2 
     - @loadable/webpack-plugin: 5.13.0 => 5.13.0 
    
    
    webpack5 
    opened by WaveString 42
  • undefined is not an object (evaluating 'e[t].call')

    undefined is not an object (evaluating 'e[t].call')

    🐛 Bug Report

    Sentry reports error about not being able to find module. It happens for a lot of people. I am having problem with reproducing it even, because it works for me. Tried for about a hour to cause a error and it happen only once.

    TypeError: Cannot read property 'call' of undefined
      at __webpack_require__(webpack/bootstrap:84:22)
      at call(resources/pages-Home-160eba.js:26:26)
      at __webpack_require__(webpack/bootstrap:84:22)
      at call(resources/pages-Home-160eba.js:15:17)
      at __webpack_require__(webpack/bootstrap:84:22)
      at requireSync(./src/Boot/App.tsx:35:22)
      at loadSync(./node_modules/@loadable/component/dist/loadable.esm.js:185:35)
      at new h(./node_modules/@loadable/component/dist/loadable.esm.js:135:17)
    

    Error coming from here.

    // Execute the module function
     		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    

    I checked issues and problem has been resolved in 5.11.0 release when it comes to chunks.

    Any idea what could be a cause ?

    Expected behavior

    Should not happen.

    Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

    Paste the results here:

    ## System:
     - OS: macOS 10.15.4
     - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
     - Memory: 1.34 GB / 16.00 GB
     - Shell: 5.7.1 - /bin/zsh
    ## Binaries:
     - Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
     - Yarn: 1.21.1 - ~/.yarn/bin/yarn
     - npm: 6.7.0 - ~/.nvm/versions/node/v11.12.0/bin/npm
     - Watchman: 4.9.0 - /usr/local/bin/watchman
    ## npmPackages:
     - @loadable/babel-plugin: ^5.12.0 => 5.12.0
     - @loadable/component: ^5.12.0 => 5.12.0
     - @loadable/server: ^5.12.0 => 5.12.0
     - @loadable/webpack-plugin: ^5.12.0 => 5.12.0
    
    opened by lluzak 37
  • Invariant Violation: loadable: SSR requires `@loadable/babel-plugin`, please install it

    Invariant Violation: loadable: SSR requires `@loadable/babel-plugin`, please install it

    🐛 Bug Report

    I have configed '@loadable/babel-plugin' in babel.config.js, but when i use SSR to render react file ,then i got this error message image

    this is my config file image

    and this is SSR image

    this is client side route file image

    i want to get some help and to fix it

    bug 
    opened by zhenliliu 30
  • Consider using the defer attribute instead of async for script tags [performance]

    Consider using the defer attribute instead of async for script tags [performance]

    🚀 Feature Proposal

    It seems like the most performant way of loading scripts is to include them with defer instead of async. At least according to this article

    We'd be getting the following: image

    Instead of: image

    And when it comes to SSR, it would mean the js would only execute in order once the HTML is fully loaded.

    opened by charlespwd 28
  • Use prefetch, not preload for better TTI

    Use prefetch, not preload for better TTI

    Addresses #720

    Summary

    The commit changes link tags to use prefetch only.

    Why? The browser starts downloading JS bundles sooner but with the lowest priority. The priority for JS bundles becomes lower than HTML images and CSS files so the browser can download these files with almost the same speed as before. But JS bundles are downloading faster.

    link prefetch vs. link preload

    Prefetching will give the browser freedom to choose the best timing to load the bundles by giving Js bundles the lowest priority. On the other hand, preloading will give JS bundles the highest priority and will begin by loading them early in the page lifecycle, even before HTML has finished loading, and the browser's main rendering machinery kicks in. So preload will block the main content of the page to load until Js bundles are entirely loaded, Thus, result in significant regressions in TTI and LCP.

    link prefetch, on the other hand, doesn't compete with HTML loading because it has a lower priority.

    With no link tags, images and JS bundles had equal (low) priority before adding link prefetch tags. So, the browser will suboptimally decide when to download each one. Typically, the browser will first download images based on the HTML tags and then begin downloading the main JS bundles.

    After adding link prefetch tags, images have a low priority but the main JS bundles have the lowest priority. So, the browser can optimally decide when to download the JS bundles. Thus, we find that the browser downloads the JS bundles at the beginning with the images. Then, it stops downloading the main Js bundles and decides to focus all the network resources on downloading images until they finish up, then it continues downloading the Js bundles. Thus, that results in lowering the TTI and increasing the interactivity of the website.

    Test plan

    TBD

    wontfix 
    opened by justin808 26
  • Failing to import named exports server side

    Failing to import named exports server side

    🐛 Bug Report

    When importing a named export from another file, I receive the following error

    {
      "status": "error",
      "message": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.",
      "stack": [
        "Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.",
        "at invariant (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:58:15)",
        "at ReactDOMServerRenderer.render (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:3395:7)",
        "at ReactDOMServerRenderer.read (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:3131:29)",
        "at renderToString (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:3598:27)",
        "at eval (webpack:///./src/server/render.jsx?:40:90)","at Layer.handle [as handle_request] (webpack:///../node_modules/express/lib/router/layer.js?:95:5)",
        "at trim_prefix (webpack:///../node_modules/express/lib/router/index.js?:317:13)","at eval (webpack:///../node_modules/express/lib/router/index.js?:284:7)",
        "at Function.process_params (webpack:///../node_modules/express/lib/router/index.js?:335:12)","at next (webpack:///../node_modules/express/lib/router/index.js?:275:10)"
      ]
    }
    

    To Reproduce

    Express SSR setup

    App.js

    import React from 'react'
    import loadable from '@loadable/component'
    import './main.css'
    
    const A = loadable(async () => {
      const { A: AComponent } = await import('./letters/A')
      return () => <AComponent />
    })
    
    const App = () => (
      <div>
        <A />
      </div>
    )
    
    export default App
    

    ./letters/A.js

    export const A = () => 'A'
    

    Expected behavior

    Named export should resolve server side and render correctly

    Link to repl or repo (highly encouraged)

    Example Repo

    wontfix discussion 🗣 
    opened by robdonn 25
  • Loadable Components raises error `SSR requires @loadable/babel-plugin, please install it` when using TypeScript `commonjs` modules.

    Loadable Components raises error `SSR requires @loadable/babel-plugin, please install it` when using TypeScript `commonjs` modules.

    🐛 Bug Report

    Dynamic import of some components randomly raise (node:12876) UnhandledPromiseRejectionWarning: Invariant Violation: loadable: SSR requires @loadable/babel-plugin, please install it when access any page of the app in Chrome (server is starting ok) ; while others don't. The plugin is obviously installed. Some components randomly raise the same error not when calling them but when trying to 'display source code' in Chrome. Some components just run fine.

    To Reproduce

    This component systematically raise this error when any page is called:

    import React, { Component } from 'react'
    import { IAppDictonary, IAppSetMeta, IAppUser } from '../Shared/App'
    import { siteHomepage } from 'bnc-libs/lib/page'
    import { Page } from '../../libs/page'
    
    let pageMeta = new Page()
    Object.assign(pageMeta, siteHomepage)
    
    export interface IHomeProps extends IAppDictonary, IAppUser, IAppSetMeta { }
    
    export interface IHomeStates { }
    
    export class Home extends Component<IHomeProps, IHomeStates> {
    
      componentDidMount() {
        this.props.setMeta(pageMeta)
      }
    
      render() {
        const d = this.props.dictionary
        return (
          <div id="mainDiv" className="homepage">
            <div className="devBanner">
              <h2>{d.devInProgressTitle}</h2>
              <div className="mainDiv center bigMargin">
                <img
                  id="tortoise"
                  src='/i/ui/tortoise.webp' alt={d.devInProgressTitle} /><br />
                <p>{d.devInProgressText}</p>
              </div>
            </div>
          </div>
        )
      }
    }
    
    export default Home
    

    Other similar components don't raise the error when displayed, but do when trying to display source code of the page in Chrome.

    Expected behavior

    No error.

    System:

    • OS: Windows 10 10.0.19041
    • CPU: (4) x64 Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz
    • Memory: 4.61 GB / 9.98 GB

    Binaries:

    • Node: 14.16.0 - D:\DEV\nodejs\node.EXE
    • npm: 6.14.11 - D:\DEV\nodejs\npm.CMD

    Config

    "dependencies": {
        "@loadable/component": "^5.14.1",
        "@loadable/server": "^5.14.2",
        "bnc-libs": "^0.2.33",
        "cookie-parser": "^1.4.5",
        "express": "^4.17.1",
        "isomorphic-fetch": "^3.0.0",
        "lazysizes": "^5.3.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.2.0"
      },
      "devDependencies": {
        "@babel/cli": "^7.13.10",
        "@babel/core": "^7.13.13",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@babel/preset-react": "^7.13.13",
        "@babel/preset-typescript": "^7.13.0",
        "@loadable/babel-plugin": "^5.13.2",
        "@loadable/webpack-plugin": "^5.14.2",
        "@types/express": "^4.17.11",
        "@types/isomorphic-fetch": "0.0.35",
        "@types/loadable__component": "^5.13.3",
        "@types/loadable__server": "^5.12.3",
        "@types/node": "^14.14.37",
        "@types/react": "^17.0.3",
        "@types/react-dom": "^17.0.3",
        "@types/react-router-dom": "^5.1.7",
        "babel-loader": "^8.2.2",
        "jshint": "^2.12.0",
        "ts-node": "^9.1.1",
        "ts-node-dev": "^1.1.6",
        "typescript": "^4.2.3",
        "webpack": "^5.28.0",
        "webpack-cli": "^4.5.0",
        "webpack-node-externals": "^2.5.2"
      }
    }
    
    wontfix 
    opened by ludovic-lambert 24
  • [Error] Server and Client modules are not sync

    [Error] Server and Client modules are not sync

    Hi, I setup this library with SSR and currently I'm doing code-splitting for redux reducer based on this solution. But I encounter an error as following:

    2018-02-11 2 47 56

    BTW, if I remove the loadComponents().then( ... ) from my client.js the error gone but another error occurs as following:

    2018-02-11 2 59 16

    Any suggestion for it?

    opened by wellyshen 24
  • #718 server-side-rendering with react 18

    #718 server-side-rendering with react 18

    Summary

    th The issue https://github.com/gregberge/loadable-components/issues/718 mentions, that this library is not usable with react 18. However, this is an update of server-side-rendering example within react 18. And it works fine without errors or warnings. From what I can see you should just use react >=16.3.0: https://github.com/gregberge/loadable-components/blob/main/packages/component/package.json#L37

    Test plan

    cd packages/component
    yarn
    yarn dev
    

    open http://localhost:9000. Observe that server-side rendered code is properly hydrated without any warnings: lodable-components-react-18-ssr

    opened by vaukalak 1
  • Testing loadable-components with enzyme, Mocha, chai, sinon snapshots

    Testing loadable-components with enzyme, Mocha, chai, sinon snapshots

    💬 Questions and Help

    Hey Team, Recently I have done migration to @loadable component from universal component, but I am trying to solve the test coverage issue with enzyme Mocha chai snapshots for my existing project. Earlier all test cases were working fine with Universal component, but now Its lagging coverage percentage due to following

    image

    My Loadable HOC as per @loadable Docs

    LoadableComponent.js

    `import React from 'react'; import baseLoadable from '@loadable/component'; import { getCookie } from '@bbb-app/utils/universalCookie'; import { isBrowser } from '@bbb-app/utils/common'; import { logErrorsToService } from '@bbb-app/utils/serviceUtil';

    export const logError = error => { logErrorsToService({ errorMessage: error && error.message, errorStack: error && error.stack.substring(0, 200), quantumMetricSessionID: getCookie('QuantumMetricSessionID'), quantumMetricUserID: getCookie('QuantumMetricUserID'), }); }; // code spliting for first laod and at any event /* Use case: We want a separate bundle for our component but we want the client request to be fired on some particular event. In this scenario, we will be going for @loadable/component. Example: The drawer menu component that we see in mWeb. (1) We create a separate component for our side menu. (2) This bundle only gets imported when we click on the hamburger menu icon. */ const loadable = (func, loading) => { let comp = null; try { comp = baseLoadable(func, { fallback: loading ||

    }); return comp; } catch (error) { if (isBrowser()) { logError(error); } } return comp; }; export default loadable; `

    any help would be highly appreciated. thanks in advance.

    opened by don4 1
  • Document `@swc/plugin-loadable-components`

    Document `@swc/plugin-loadable-components`

    💬 Questions and Help

    I searched for issues but there was only request for SWC plugins. I implemented SWC plugin for @loadable/compoents and it's published as @swc/plugin-loadable-components

    A thing to note is that SWC plugin API is still experimental. Still, I'm lefting an issue so someone search for SWC plugin can find this issue.

    Git repo: https://github.com/swc-project/plugins/tree/28ab1c04df68f7347d470ed3bac4e72d7f7befa9/packages/loadable-components Npm: https://www.npmjs.com/package/@swc/plugin-loadable-components Documentation: https://swc.rs/docs/configuration/compilation#jscexperimentalplugins

    opened by kdy1 1
  • feat: allow overriding stats for webpack-plugin

    feat: allow overriding stats for webpack-plugin

    This change allows the end user to pass options to the stats object to override them for their given use cases. It will default to the old behavior if no opts are passed.

    Closes https://github.com/gregberge/loadable-components/issues/897

    Summary

    Close https://github.com/gregberge/loadable-components/issues/897 in a non breaking way by allowing users to override specific stats opts, but fallback on the defaults if no opts passed.

    Test plan

    Open to suggestions in this department.

    opened by Aghassi 5
  • chore(deps): bump terser from 4.3.8 to 4.8.1 in /examples/webpack/webpack4

    chore(deps): bump terser from 4.3.8 to 4.8.1 in /examples/webpack/webpack4

    Bumps terser from 4.3.8 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    wontfix dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump terser from 4.8.0 to 4.8.1 in /website

    chore(deps): bump terser from 4.8.0 to 4.8.1 in /website

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    wontfix dependencies 
    opened by dependabot[bot] 1
Releases(v5.15.2)
Owner
Greg Bergé
❤️ React & JavaScript — Teacher, speaker. My open source projects are trusted by thousand developers around the world.
Greg Bergé
Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code ???? Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-

kamesh sethupathi 6 Aug 11, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

zthxxx 811 Sep 25, 2022
Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

OSLabs Beta 461 Sep 8, 2022
Code Kitchen - a React live-coding playground

Code Kitchen is a React live-coding playground which allows the developers to embed React component demos into a React UI library’s web documents.

FreeWheel, a Comcast Company 64 Aug 27, 2022
Easily detect React components source code from Chrome!

Easily detect React components source code from Chrome!

Kyohei Fukuda 115 Sep 28, 2022
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 27.5k Sep 29, 2022
CodeSwing is an interactive coding playground for VS Code

?? CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications ("swings"). It's

Jonathan Carter 908 Sep 24, 2022
Use SWC with Rollup to transform ESNext and TypeScript code.

rollup-plugin-swc SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replace rollup-

Sukka 59 Sep 9, 2022
Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages.

docusaurus-plugin-code-preview Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages. Quick Installat

Sean Perkins 3 May 28, 2022
🦋 Jump to local IDE source code while click the element of browser automatically

?? Why When developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit

Frozen FIsh 99 Sep 20, 2022
Commonninja-react - A small library for using Common Ninja's plugins in React projects

Common Ninja for React A small library for using Common Ninja's plugins in React

Common Ninja 1 Jan 3, 2022
Chainable, easy to read, React testing library

##Legit Tests This is a super friendly testing library for React, inspired by express middleware, it's easily extendable. Why did I make this when you

Legitcode 252 Jul 31, 2022
The relevant React Events Library.

rel-events To read the docs, go to our docs folder. :) To see the app demo, go to our codesandbox page! Welcome to the rel-events github repo! rel-eve

labcodes 19 Jul 12, 2022
🛹 React Web3 wallet hook for the Onboard.js library.

useOnboard() A React Web3 wallet hook for Onboard.js library. Features Fully configurable as much as Onboard itself selectWallet and disconnectWallet

v 1 r t l 45 Jun 14, 2022
Show More Less: React library to manage long paragraphs

ShowMoreLess React library to manage long paragraphs Install npm install --save show-more-less Usage import React, { useState } from 'react' import st

101Loop 5 Dec 19, 2021
JHipster React library

Greetings, Java Hipster! This is the JHipster React utilities library Full documentation and information is available on our website at http://www.jhi

JHipster 80 Jul 13, 2022
Lightweight unit test library for ReactJS

react-unit React Unit is a lightweight unit test library for ReactJS with very few (js-only) dependencies. By using react-unit you can run your ReactJ

Patricio Zavolinsky 194 May 30, 2022
The reactive library for the spreadsheet driven development

Sunrise Spreadsheet-like dataflow programming in TypeScript Example import { cell, formula, swap, deref } from '@snapview/sunrise' const inc = (a) =>

Snapview GmbH 26 Sep 12, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 24, 2022