Promote v12 beta into master

.babelrc

@@ -2,37 +2,11 @@
   "plugins": [
     "version-inline",
     "transform-css-import-to-string",
-    "babel-plugin-stylus-compiler"
+    "babel-plugin-stylus-compiler",
+    "@babel/plugin-proposal-function-bind"
   ],
   "presets": [
-    [
-      "es2015",
-      {
-        "loose": true,
-        "modules": false
-      }
-    ],
-    "stage-0",
-    "react"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "transform-es2015-modules-commonjs"
-      ]
-    },
-    "npm": {
-      "presets": [
-        [
-          "es2015",
-          {
-            "loose": true,
-            "modules": "commonjs"
-          }
-        ],
-        "stage-0",
-        "react"
-      ]
-    }
-  }
-}
+    ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3.26.1" }],
+    "@babel/preset-react"
+  ]
+}

.browserslistrc

@@ -0,0 +1 @@
+defaults, last 2 versions, not dead, IE 11

.circleci/config.yml

@@ -81,10 +81,12 @@ workflows:
           requires:
             - build-and-test
           pkg-manager: yarn
+          node-version: 18.12.1
           context:
             - publish-npm
             - publish-gh
           filters:
             branches:
               only:
                 - master
+                - beta

.gitignore

@@ -9,4 +9,6 @@ npm-debug.log
 .idea/
 .env
 local.log
-yarn-error.log
+yarn-error.log
+build/
+.yarn/

.npmignore

@@ -9,7 +9,6 @@ scripts/
 src/
 support/
 test/
-bower.json
 Gruntfile.js
 .css.map
 *~

.shiprc

@@ -1,7 +1,6 @@
 {
-    "files": {
-        "bower.json": [],
-        "README.md": []
-    },
-    "postbump": "yarn dist build"
+  "files": {
+    "README.md": []
+  },
+  "postbump": "yarn dist build"
 }

.vscode/settings.json

@@ -2,7 +2,6 @@
   // Place your settings in this file to overwrite default and user settings.
   "search.exclude": {
     "**/node_modules": true,
-    "**/bower_components": true,
     "**/lib": true,
     "**/coverage": true,
     "**/examples": true,

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -1,5 +1,4 @@
 # Change Log
-
 ## [v11.35.0](https://github.com/auth0/lock/tree/v11.35.0) (2022-12-19)
 
 [Full Changelog](https://github.com/auth0/lock/compare/v11.34.2...v11.35.0)
@@ -18,6 +17,17 @@
 - Update okta logo [\#2201](https://github.com/auth0/lock/pull/2201) ([jamescgarrett](https://github.com/jamescgarrett))
 - Update readme to match new design [\#2187](https://github.com/auth0/lock/pull/2187) ([ewanharris](https://github.com/ewanharris))
 
+## [v12.0.0-beta.0](https://github.com/auth0/lock/tree/v12.0.0-beta.0) (2022-12-08)
+
+[Full Changelog](https://github.com/auth0/lock/compare/v11.34.2...v12.0.0-beta.0)
+
+:warning: This is a **beta release** of Lock.js v12 that includes an upgrade to React 18, and should not be used in production. If you find any issues, please [submit a bug report](https://github.com/auth0/lock/issues/new?assignees=&labels=bug+report,v12-beta&template=report_a_bug.md&title=).
+
+**Changed**
+
+- Upgrade to React 18 [\#2209](https://github.com/auth0/lock/pull/2209) ([stevehobbsdev](https://github.com/stevehobbsdev))
+- Upgrade to Webpack 5, Jest 29, Babel 8 [\#2213](https://github.com/auth0/lock/pull/2213) ([stevehobbsdev](https://github.com/stevehobbsdev))
+- bump dependencies to latest patch and fix typos [\#2210](https://github.com/auth0/lock/pull/2210) ([piwysocki](https://github.com/piwysocki))
 ## [v11.34.2](https://github.com/auth0/lock/tree/v11.34.2) (2022-10-10)
 
 [Full Changelog](https://github.com/auth0/lock/compare/v11.34.1...v11.34.2)

DEVELOPMENT.md

@@ -3,7 +3,7 @@
 Requires:
 
 - [Yarn](https://yarnpkg.com/)
-- >= Node 10.18.1
+- [Node LTS](https://nodejs.org)
 
 ## Building
 

Gruntfile.js

@@ -1,35 +1,11 @@
 'use strict';
 
 const path = require('path');
-const fs = require('fs');
-const tmp = require('tmp');
-const pkg = require('./package');
 const webpack = require('webpack');
 const webpackConfig = require('./webpack.config.js');
 const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
-const { spawnSync } = require('child_process');
 
-/**
- * This is a helper function to generate valid certs using mkcert.
- * If mkcert is not installed it will return false.
- */
-function getDevCerts() {
-  let result = false;
-  const tmpDir = tmp.dirSync({ unsafeCleanup: true, prefix: 'lock-dev-' });
-
-  try {
-    spawnSync('mkcert', ['localhost'], { cwd: tmpDir.name });
-    result = {
-      key: fs.readFileSync(path.join(tmpDir.name, 'localhost-key.pem')),
-      cert: fs.readFileSync(path.join(tmpDir.name, 'localhost.pem'))
-    };
-  } catch (err) {}
-
-  tmpDir.removeCallback();
-  return result;
-}
-
-module.exports = function(grunt) {
+module.exports = function (grunt) {
   const pkg_info = grunt.file.readJSON('package.json');
 
   grunt.initConfig({
@@ -61,8 +37,9 @@ module.exports = function(grunt) {
       touch_index: 'touch src/index.js'
     },
     webpack: {
-      options: webpackConfig,
       build: {
+        ...webpackConfig,
+        mode: 'production',
         devtool: 'source-map',
         output: {
           path: path.join(__dirname, 'build'),
@@ -80,11 +57,6 @@ module.exports = function(grunt) {
             }
           }),
           new webpack.optimize.AggressiveMergingPlugin(),
-          new webpack.optimize.UglifyJsPlugin({
-            compress: { warnings: false, screw_ie8: true },
-            sourceMap: true,
-            comments: false
-          }),
           new UnminifiedWebpackPlugin(),
           new webpack.BannerPlugin({
             raw: false,
@@ -98,17 +70,11 @@ module.exports = function(grunt) {
     },
     'webpack-dev-server': {
       options: {
-        webpack: webpackConfig,
-        publicPath: '/build/'
-      },
-      dev: {
-        hot: true,
-        port: 3000,
-        https: getDevCerts() || true,
-        webpack: {
-          devtool: 'source-map'
+        output: {
+          publicPath: '/build/'
         }
       },
+      dev: webpackConfig,
       design: {
         webpack: {
           entry: './support/design/index.js',
@@ -146,14 +112,16 @@ module.exports = function(grunt) {
   grunt.registerTask('prepare_dev', ['clean:dev']);
   grunt.registerTask('dev', ['prepare_dev', 'webpack-dev-server:dev']);
   grunt.registerTask('design', ['prepare_dev', 'webpack-dev-server:design']);
-  grunt.registerMultiTask('i18n', 'Prepares i18n files to be hosted in CDN', function() {
+  grunt.registerMultiTask('i18n', 'Prepares i18n files to be hosted in CDN', function () {
     var languages = {};
+
     var Auth0 = {
-      registerLanguageDictionary: function(lang, dict) {
+      registerLanguageDictionary: function (lang, dict) {
         languages[lang] = dict;
       }
     };
-    this.files.forEach(function(file) {
+
+    this.files.forEach(function (file) {
       var filename = file.src[0];
       var lang = path.basename(filename, '.js');
       var dict = require('./' + filename).default || require('./' + filename);

README.md

@@ -1,34 +1,29 @@
 ![Auth0's configurable login form for web applications](https://cdn.auth0.com/website/sdks/banners/lock-banner.png)
-
 ![Release](https://img.shields.io/npm/v/auth0-lock)
 ![Downloads](https://img.shields.io/npm/dw/auth0-lock)
 [![License](https://img.shields.io/:license-mit-blue.svg?style=flat)](https://opensource.org/licenses/MIT)
 ![CircleCI](https://img.shields.io/circleci/build/github/auth0/lock)
 
-## Documentation 
+> :warning: Lock is built using React 18 from v12 onwards. Getting issues? Please [submit a bug report](https://github.com/auth0/lock/issues/new?assignees=&labels=bug+report,v12&template=report_a_bug.md&title=).
+
+## Documentation
 
 - [Docs Site](https://auth0.com/docs) - explore our Docs site and learn more about Auth0.
 
 ## Getting Started
+
 ### Browser Compatibility
 
-We ensure browser compatibility in Chrome, Safari, Firefox and IE >= 10.
+We ensure browser compatibility in Chrome, Safari, Firefox and IE >= 11.
 
 ### Installation
 
-Using [npm](https://npmjs.org) in your project directory run the following command:
+Install Lock into your project using [npm](https://npmjs.org):
 
 ```sh
 npm install auth0-lock
 ```
 
-From CDN
-
-```html
-<!-- Latest patch release (recommended for production) -->
-<script src="https://cdn.auth0.com/js/lock/11.35.0/lock.min.js"></script>
-```
-
 ### Configure Auth0
 
 Create a **Single Page Application** in the [Auth0 Dashboard](https://manage.auth0.com/#/applications).
@@ -40,44 +35,44 @@ Create a **Single Page Application** in the [Auth0 Dashboard](https://manage.aut
 > - Scroll down and click on the "Show Advanced Settings" link.
 > - Under "Advanced Settings", click on the "OAuth" tab.
 > - Ensure that "JsonWebToken Signature Algorithm" is set to `RS256` and that "OIDC Conformant" is enabled.
-Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:
+>   Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:
 
 - **Allowed Callback URLs**: `http://localhost:3000`
 - **Allowed Logout URLs**: `http://localhost:3000`
 - **Allowed Web Origins**: `http://localhost:3000`
 
 > These URLs should reflect the origins that your application is running on. **Allowed Callback URLs** may also include a path, depending on where you're handling the callback (see below).
-Take note of the **Client ID** and **Domain** values under the "Basic Information" section. You'll need these values in the next step.
+> Take note of the **Client ID** and **Domain** values under the "Basic Information" section. You'll need these values in the next step.
 
 ### Configure the SDK
 
-Create either an `Auth0Lock` or `Auth0LockPasswordless` instance. 
+Create either an `Auth0Lock` or `Auth0LockPasswordless` instance, depending on your use case:
 
 #### Auth0Lock
 
-````js
+```js
 import { Auth0Lock } from 'auth0-lock';
 
 const lock = new Auth0Lock('{YOUR_AUTH0_CLIENT_ID}', '{YOUR_AUTH0_DOMAIN}');
-````
+```
 
 #### Auth0LockPasswordless
 
-````js
+```js
 import { Auth0LockPasswordless } from 'auth0-lock';
 
 const lock = new Auth0LockPasswordless('{YOUR_AUTH0_CLIENT_ID}', '{YOUR_AUTH0_DOMAIN}');
-````
+```
 
 ### Logging In
 
-You can then configure a listener for the `authenticated` event to retrieve an access token and call `show` to display the Lock widget.
+Configure a listener for the `authenticated` event to retrieve an access token and call `show` to display the Lock widget.
 
 ```html
 <button id="login">Click to Login</button>
 ```
 
-````js
+```js
 lock.on('authenticated', function (authResult) {
   lock.getUserInfo(authResult.accessToken, function (error, profileResult) {
     if (error) {
@@ -92,10 +87,11 @@ lock.on('authenticated', function (authResult) {
   });
 });
 
+// Show the widget when the login button is clicked
 document.getElementById('login').addEventListener('click', () => {
   lock.show()
 });.
-````
+```
 
 For other comprehensive examples and documentation on the configuration options, see the [EXAMPLES.md](https://github.com/auth0/lock/blob/master/EXAMPLES.md) document.