├── .github ├── funding.yml └── workflows │ └── build-and-test.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .kodiak.toml ├── .nvmrc ├── .prettierignore ├── .release-it.json ├── .vscode └── launch.json ├── LICENSE ├── README.md ├── browser-test └── test.js ├── karma.conf.cjs ├── node-test ├── main.test.mjs └── methods.test.mjs ├── package.json ├── pnpm-lock.yaml ├── renovate.json ├── rollup.config.js └── src ├── development.js └── production.js /.github/funding.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [joeldenning] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/workflows/build-and-test.yml: -------------------------------------------------------------------------------- 1 | name: Build and Test 2 | 3 | on: 4 | - push 5 | - pull_request 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | env: 12 | MOZ_HEADLESS: 1 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: actions/setup-node@v4 16 | with: 17 | node-version: "15" 18 | - uses: pnpm/action-setup@v4.1.0 19 | with: 20 | version: 5.17.3 21 | - run: pnpm install --frozen-lockfile 22 | - run: pnpm test 23 | publish: 24 | runs-on: ubuntu-latest 25 | env: 26 | # used by 'release-it' 27 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 28 | GITHUB_TOKEN: ${{ secrets.PUBLISH_BOT }} 29 | # used manually in setting git config 30 | BOT_EMAIL: ${{ secrets.PUBLISH_BOT_EMAIL }} 31 | # used by unit tests 32 | MOZ_HEADLESS: 1 33 | needs: build 34 | if: github.ref == 'refs/heads/main' 35 | steps: 36 | - uses: actions/checkout@v4 37 | with: 38 | # Use our own token instead of the default token 39 | # this step persists login credentials so strongly that we couldn't get them to override 40 | token: ${{ secrets.PUBLISH_BOT }} 41 | - uses: actions/setup-node@v4 42 | with: 43 | node-version: "15" 44 | - uses: pnpm/action-setup@v4.1.0 45 | with: 46 | version: 5.17.3 47 | - run: pnpm install --frozen-lockfile 48 | - name: Setup auth 49 | run: | 50 | git config --global user.email "$BOT_EMAIL" 51 | git config --global user.name "esm-bundle-org-bot" 52 | echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc 53 | - name: "Publish to npm" 54 | run: pnpm run release 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | esm 107 | system 108 | .DS_Store -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpx pretty-quick --staged && pnpm test 5 | -------------------------------------------------------------------------------- /.kodiak.toml: -------------------------------------------------------------------------------- 1 | # .kodiak.toml 2 | # Minimal config. version is the only required field. 3 | version = 1 4 | approve.auto_approve_usernames = [ "renovate" ] 5 | merge.method = "squash" 6 | merge.delete_branch_on_merge = true 7 | merge.require_automerge_label = false -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | node 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .prettierignore 2 | .gitignore 3 | .husky/ 4 | LICENSE 5 | yarn.lock 6 | pnpm-lock.yaml 7 | yarn-error.log 8 | esm/ 9 | system/ 10 | .DS_Store 11 | .kodiak.toml 12 | karma.conf.cjs 13 | .nvmrc -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "release": true 4 | }, 5 | "publishConfig": { 6 | "access": "public" 7 | }, 8 | "plugins": { 9 | "release-it-plugin-esm-bundle": {} 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": ["/**"], 12 | "runtimeExecutable": "npm", 13 | "runtimeArgs": ["run-script", "build"] 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 esm-bundle 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react 2 | 3 | [![npm version](https://img.shields.io/npm/v/@esm-bundle/react.svg?style=flat)](https://www.npmjs.com/package/@esm-bundle/react) [![](https://data.jsdelivr.com/v1/package/npm/@esm-bundle/react/badge)](https://www.jsdelivr.com/package/npm/@esm-bundle/react) 4 | 5 | An ESM version of React. 6 | 7 | ["What is this" blog post](https://medium.com/@joeldenning/an-esm-bundle-for-any-npm-package-5f850db0e04d). 8 | 9 | [How can I create a repo like this](https://github.com/esm-bundle/new-repo-instructions). 10 | 11 | ## JS Delivr 12 | 13 | https://cdn.jsdelivr.net/npm/@esm-bundle/react/esm/react.development.js 14 | 15 | https://cdn.jsdelivr.net/npm/@esm-bundle/react/system/react.development.js 16 | 17 | https://cdn.jsdelivr.net/npm/@esm-bundle/react/esm/react.production.min.js 18 | 19 | https://cdn.jsdelivr.net/npm/@esm-bundle/react/system/react.production.min.js 20 | 21 | ## Unpkg 22 | 23 | https://unpkg.com/@esm-bundle/react/esm/react.development.js 24 | 25 | https://unpkg.com/@esm-bundle/react/system/react.development.js 26 | 27 | https://unpkg.com/@esm-bundle/react/esm/react.production.min.js 28 | 29 | https://unpkg.com/@esm-bundle/react/system/react.production.min.js 30 | 31 | ## Npm 32 | 33 | ```sh 34 | npm install react@npm:@esm-bundle/react 35 | ``` 36 | 37 | ## Yarn 38 | 39 | ```sh 40 | yarn add react@npm:@esm-bundle/react 41 | ``` 42 | -------------------------------------------------------------------------------- /browser-test/test.js: -------------------------------------------------------------------------------- 1 | describe("@esm-bundle/react", () => { 2 | it("can load the ESM development bundle", async () => { 3 | const React = await import("/base/esm/react.development.js"); 4 | React.default.createElement("button"); 5 | React.createElement("button"); 6 | }); 7 | 8 | it("can load the ESM production bundle", async () => { 9 | const React = await import("/base/esm/react.development.js"); 10 | React.default.createElement("button"); 11 | React.createElement("button"); 12 | }); 13 | 14 | it("can load the System.register development bundle", async () => { 15 | const React = await System.import("/base/system/react.development.js"); 16 | React.default.createElement("button"); 17 | React.createElement("button"); 18 | }); 19 | 20 | it("can load the System.register production bundle", async () => { 21 | const React = await System.import("/base/system/react.development.js"); 22 | React.default.createElement("div"); 23 | React.createElement("div"); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /karma.conf.cjs: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Tue Jan 28 2020 17:24:56 GMT-0700 (Mountain Standard Time) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | // base path that will be used to resolve all patterns (eg. files, exclude) 7 | basePath: "./", 8 | 9 | // frameworks to use 10 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 11 | frameworks: ["jasmine"], 12 | 13 | // list of files / patterns to load in the browser 14 | files: [ 15 | "https://cdn.jsdelivr.net/npm/systemjs/dist/system.js", 16 | { pattern: "browser-test/**/*.js", watched: true, type: "module" }, 17 | { pattern: "./**/*.*", watched: true, included: false, served: true } 18 | ], 19 | 20 | plugins: [ 21 | 'karma-jasmine', 22 | 'karma-firefox-launcher' 23 | ], 24 | 25 | urlRoot: "/", 26 | 27 | // list of files / patterns to exclude 28 | exclude: [], 29 | 30 | // preprocess matching files before serving them to the browser 31 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 32 | preprocessors: {}, 33 | 34 | // test results reporter to use 35 | // possible values: 'dots', 'progress' 36 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 37 | reporters: ["progress"], 38 | 39 | // web server port 40 | port: 9876, 41 | 42 | // enable / disable colors in the output (reporters and logs) 43 | colors: true, 44 | 45 | // level of logging 46 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 47 | logLevel: config.LOG_INFO, 48 | 49 | // enable / disable watching file and executing tests whenever any file changes 50 | autoWatch: true, 51 | 52 | // start these browsers 53 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 54 | browsers: ["Firefox"], 55 | 56 | // Continuous Integration mode 57 | // if true, Karma captures browsers, runs the tests and exits 58 | singleRun: false, 59 | 60 | // Concurrency level 61 | // how many browser should be started simultaneous 62 | concurrency: Infinity 63 | }); 64 | }; 65 | -------------------------------------------------------------------------------- /node-test/main.test.mjs: -------------------------------------------------------------------------------- 1 | import DevReact, { 2 | useState as devUseState, 3 | useCallback as devUseCallback, 4 | createElement as devCreateElement, 5 | } from "../esm/react.development.js"; 6 | import ProdReact, { 7 | useState as prodUseState, 8 | useCallback as prodUseCallback, 9 | createElement as prodCreateElement, 10 | } from "../esm/react.production.min.js"; 11 | 12 | describe(`React`, () => { 13 | it("Can load dev version of React", () => { 14 | expect(DevReact).to.be.ok; 15 | expect(devUseState).to.be.ok; 16 | expect(devUseCallback).to.be.ok; 17 | expect(DevReact.createElement("div")).to.be.ok; 18 | expect(devCreateElement("div")).to.be.ok; 19 | }); 20 | 21 | it("Can load prod version of React", () => { 22 | expect(ProdReact).to.be.ok; 23 | expect(prodUseState).to.be.ok; 24 | expect(prodUseCallback).to.be.ok; 25 | expect(ProdReact.createElement("div")).to.be.ok; 26 | expect(prodCreateElement("div")).to.be.ok; 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /node-test/methods.test.mjs: -------------------------------------------------------------------------------- 1 | import ReactCJSDev from "react/cjs/react.development.js"; 2 | import * as ReactESMDev from "../esm/react.development.js"; 3 | import ReactCJSProd from "react/cjs/react.production.min.js"; 4 | import * as ReactESMProd from "../esm/react.production.min.js"; 5 | 6 | describe(`All methods exist`, () => { 7 | Object.entries(ReactCJSDev).forEach(([key, value]) => { 8 | it(`dev version of ESM bundle should have ${key}`, () => { 9 | expect(ReactESMDev[key]).to.be.ok; 10 | expect(ReactCJSDev[key]).to.be.ok; 11 | expect(typeof value).to.equal(typeof ReactESMDev[key]); 12 | }); 13 | }); 14 | 15 | Object.entries(ReactCJSProd).forEach(([key, value]) => { 16 | it(`Prod version of ESM bundle should have ${key}`, () => { 17 | expect(ReactESMProd[key]).to.be.ok; 18 | expect(ReactCJSProd[key]).to.be.ok; 19 | expect(typeof value).to.equal(typeof ReactESMProd[key]); 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@esm-bundle/react", 3 | "version": "17.0.2-fix.1", 4 | "description": "An ESM version of react", 5 | "main": "esm/react.development.js", 6 | "module": "esm/react.development.js", 7 | "type": "module", 8 | "scripts": { 9 | "test": "pnpm build && concurrently -n w: 'pnpm:test:*'", 10 | "test:browser": "karma start karma.conf.cjs --single-run", 11 | "debug:test:browser": "karma start karma.conf.cjs", 12 | "test:unit": "mocha -r chai/register-expect 'node-test/**/*.*'", 13 | "test:formatting": "prettier --check './**/*'", 14 | "build": "rollup -c", 15 | "prettier": "prettier --write './**/*'", 16 | "release": "release-it", 17 | "prepublishOnly": "pnpm build && pinst --disable", 18 | "postinstall": "husky install", 19 | "postpublish": "pinst --enable" 20 | }, 21 | "files": [ 22 | "esm", 23 | "system" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/esm-bundle/react.git" 28 | }, 29 | "author": "", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/esm-bundle/react/issues" 33 | }, 34 | "homepage": "https://github.com/esm-bundle/react#readme", 35 | "devDependencies": { 36 | "@rollup/plugin-commonjs": "28.0.3", 37 | "@rollup/plugin-node-resolve": "16.0.1", 38 | "@rollup/plugin-replace": "6.0.2", 39 | "concurrently": "9.1.2", 40 | "esm-bundle-scripts": "1.2.0", 41 | "husky": "9.1.7", 42 | "karma": "6.4.4", 43 | "karma-firefox-launcher": "2.1.3", 44 | "karma-jasmine": "5.1.0", 45 | "mocha": "10.8.2", 46 | "pinst": "3.0.0", 47 | "prettier": "3.5.3", 48 | "pretty-quick": "4.1.1", 49 | "react": "17.0.2", 50 | "release-it": "19.0.3", 51 | "release-it-plugin-esm-bundle": "3.0.0", 52 | "rollup": "2.79.2", 53 | "@rollup/plugin-terser": "0.4.4" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"] 3 | } 4 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import commonjs from "@rollup/plugin-commonjs"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import replace from "@rollup/plugin-replace"; 4 | import { terser } from "rollup-plugin-terser"; 5 | 6 | const DevReact = require("react/cjs/react.development.js"); 7 | const ProdReact = require("react/cjs/react.production.min.js"); 8 | 9 | function createDevConfig(format) { 10 | const dir = format === "module" ? "esm" : format; 11 | 12 | return { 13 | input: `src/development.js`, 14 | output: { 15 | format, 16 | file: `${dir}/react.development.js`, 17 | sourcemap: true, 18 | banner: `/* react@${DevReact.version} development version */`, 19 | exports: "named", 20 | }, 21 | plugins: [ 22 | commonjs(), 23 | resolve(), 24 | replace({ 25 | values: { 26 | "process.env.NODE_ENV": '"development"', 27 | }, 28 | }), 29 | ], 30 | }; 31 | } 32 | 33 | function createProdConfig(format) { 34 | return { 35 | input: `src/production.js`, 36 | output: { 37 | format, 38 | file: `${format}/react.production.min.js`, 39 | sourcemap: true, 40 | banner: `/* react@${ProdReact.version} production version */`, 41 | exports: "named", 42 | }, 43 | plugins: [ 44 | commonjs(), 45 | resolve(), 46 | replace({ 47 | values: { 48 | "process.env.NODE_ENV": '"production"', 49 | }, 50 | }), 51 | terser({ 52 | output: { 53 | comments(node, comment) { 54 | return comment.value.trim().startsWith("react@"); 55 | }, 56 | }, 57 | }), 58 | ], 59 | }; 60 | } 61 | 62 | export default [ 63 | createDevConfig("esm"), 64 | createDevConfig("system"), 65 | createProdConfig("esm"), 66 | createProdConfig("system"), 67 | ]; 68 | -------------------------------------------------------------------------------- /src/development.js: -------------------------------------------------------------------------------- 1 | import React from "react/cjs/react.development.js"; 2 | 3 | export default React; 4 | export const __esmModule = true; 5 | export const { 6 | Fragment, 7 | StrictMode, 8 | Profiler, 9 | Suspense, 10 | Children, 11 | Component, 12 | PureComponent, 13 | __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, 14 | cloneElement, 15 | createContext, 16 | createElement, 17 | createFactory, 18 | createRef, 19 | forwardRef, 20 | isValidElement, 21 | lazy, 22 | memo, 23 | useCallback, 24 | useContext, 25 | useDebugValue, 26 | useEffect, 27 | useImperativeHandle, 28 | useLayoutEffect, 29 | useMemo, 30 | useReducer, 31 | useRef, 32 | useState, 33 | version, 34 | } = React; 35 | -------------------------------------------------------------------------------- /src/production.js: -------------------------------------------------------------------------------- 1 | import React from "react/cjs/react.production.min.js"; 2 | 3 | export default React; 4 | export const __esmModule = true; 5 | export const { 6 | Fragment, 7 | StrictMode, 8 | Profiler, 9 | Suspense, 10 | Children, 11 | Component, 12 | PureComponent, 13 | __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, 14 | cloneElement, 15 | createContext, 16 | createElement, 17 | createFactory, 18 | createRef, 19 | forwardRef, 20 | isValidElement, 21 | lazy, 22 | memo, 23 | useCallback, 24 | useContext, 25 | useDebugValue, 26 | useEffect, 27 | useImperativeHandle, 28 | useLayoutEffect, 29 | useMemo, 30 | useReducer, 31 | useRef, 32 | useState, 33 | version, 34 | } = React; 35 | --------------------------------------------------------------------------------