Merge pull request #75 from userfront/add-types

Add correct TS .d.ts type declarations

package/build/build.cjs

@@ -1,7 +1,6 @@
 const path = require("path");
 const vite = require("vite");
 const react = require("@vitejs/plugin-react");
-const dts = require("vite-plugin-dts");
 const cssInjectedByJsPlugin = require("vite-plugin-css-injected-by-js").default;
 
 const resolve = path.resolve;
@@ -50,9 +49,6 @@ const rollupOptions = {
 
 const esmPlugins = [
   react(),
-  dts({
-    insertTypesEntry: true,
-  }),
   cssInjectedByJsPlugin()
 ];
 
@@ -75,8 +71,6 @@ const esmOptions = {
 
 /* UMD (CommonJS and bundle) build config */
 
-// The dts (.d.ts file generation) plugin throws if it's
-// run with the UMD build
 const umdPlugins = [
   react(),
   cssInjectedByJsPlugin()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@userfront/toolkit",
-  "version": "1.0.1",
+  "version": "1.0.2-alpha.8",
   "description": "Bindings and components for authentication with Userfront with React, Vue, other frameworks, and plain JS + HTML",
   "type": "module",
   "directories": {
@@ -10,7 +10,8 @@
     "dev-build": "node ./build/watch.cjs",
     "dev-tsc": "tsc --watch --noEmit",
     "dev": "npm-run-all --parallel dev-tsc dev-build",
-    "build": "tsc && node ./build/build.cjs",
+    "build": "tsc && node ./build/build.cjs && npm run build-types",
+    "build-types": "tsc src/**/*.{js,jsx} --declaration --allowJs --emitDeclarationOnly --outDir dist; cp types/index.d.ts dist/index.d.ts; cp types/index.d.ts dist/react.d.ts",
     "test": "vitest run",
     "watch": "vitest",
     "coverage": "vitest run --coverage",

package/src/components/BackButton.jsx

@@ -4,7 +4,7 @@
  * If no children are provided, contains the text "Back".
  * Additional props are passed through to the underlying <button>
  *
- * @param {props} props
+ * @param {object} props
  * @param {function} props.onEvent
  * @param {function} props.onClick
  * @param {Array} props.children

package/src/components/LogoutButton.jsx

@@ -3,11 +3,11 @@ import { callUserfront } from "../services/userfront";
 /**
  * A functioning logout button.
  *
- * @param {props} props
- * @param {boolean} props.disabled - is the button disabled?
- * @param {string | boolean} props.redirect - URL to redirect to. If false, disables redirect.
+ * @param {object} props
+ * @param {boolean=} props.disabled - is the button disabled?
+ * @param {(string|boolean)=} props.redirect - URL to redirect to. If false, disables redirect.
  *  If absent, redirect based on the tenant's after-logout path.
- * @param {array} props.children - children to display in the button. Shows "Log out" if children are absent.
+ * @param {array=} props.children - children to display in the button. Shows "Log out" if children are absent.
  * @returns
  */
 const LogoutButton = ({ redirect, disabled = false, children }) => {

package/src/index.js

@@ -17,11 +17,10 @@ export { default as LogoutButton } from "./components/LogoutButton";
  */
 import "./themes/default.css";
 
-// TODO #9: add link to upgrade guide
 Userfront.build = (toolId) => {
   console.error(`Userfront.build(${toolId}) has been removed. Instead, import the component directly:
-    import { SignupForm, LoginForm, PasswordResetForm, SetNewPasswordForm, LogoutButton } from "@userfront/react"
-  See TODO DOCS LINK for more information about upgrading to the new toolkit.`);
+    import { SignupForm, LoginForm, PasswordResetForm, SetNewPasswordForm, LogoutButton } from "@userfront/toolkit/react"
+  See https://userfront.com/dashboard/toolkit for more information about upgrading to the new toolkit.`);
 };
 
 /*

package/src/packaged-forms/LoginForm.jsx

@@ -6,23 +6,23 @@ import PackagedUniversalForm from "./UniversalForm";
  * A fully functional Userfront login form
  *
  * @param {object} props
- * @param {string} props.tenantId - the tenant ID to use
- * @param {object} props.flow - auth flow to use. By default this is fetched from the server.
- * @param {boolean} props.compact - if true, for the password method, show a "Username and password" button.
+ * @param {string=} props.tenantId - the tenant ID to use
+ * @param {object=} props.flow - auth flow to use. By default this is fetched from the server.
+ * @param {boolean=} props.compact - if true, for the password method, show a "Username and password" button.
  *   If false, show the password entry form alongside the buttons to choose a different factor.
- * @param {string | boolean} props.redirect - URL to redirect to after successful login.
+ * @param {(string|boolean)=} props.redirect - URL to redirect to after successful login.
  *   If false, do not redirect.
  *   If absent, use the after-login path from the server.
- * @param {boolean} props.redirectOnLoadIfLoggedIn - if true, will redirect to the after-signup path on page load
+ * @param {boolean=} props.redirectOnLoadIfLoggedIn - if true, will redirect to the after-signup path on page load
  *     if the user is already logged in
  *   If false, will not redirect on page load.
  *   Defaults to false.
- *   Does not control whether user is redirected after signing up. @see props.redirect
- * @param {boolean} props.shouldFetchFlow - if true (default), fetch the first factors from the server.
+ *   Does not control whether user is redirected after signing up.
+ * @param {boolean=} props.shouldFetchFlow - if true (default), fetch the first factors from the server.
  *   If false, do not fetch the first factors from the server.
  *   Should be left at true in most production use cases.
  *   May be useful in some dev environments.
- * @param {boolean} props.xstateDevTools - if true, enable XState dev tools on the form's model.
+ * @param {boolean=} props.xstateDevTools - if true, enable XState dev tools on the form's model.
  *   Defaults to false; should remain false in production.
  *   Only useful when developing this library.
  */

package/src/packaged-forms/PasswordResetForm.jsx

@@ -6,11 +6,11 @@ import PackagedUniversalForm from "./UniversalForm";
  * reset link or for logged-in users.
  *
  * @param {object} props
- * @param {string} props.tenantId - the tenant ID to use
- * @param {string | boolean} props.redirect - URL to redirect to after successful login.
+ * @param {string=} props.tenantId - the tenant ID to use
+ * @param {(string|boolean)=} props.redirect - URL to redirect to after successful login.
  *   If false, do not redirect.
  *   If absent, use the after-login path from the server.
- * @param {boolean} props.xstateDevTools - if true, enable XState dev tools on the form's model.
+ * @param {boolean=} props.xstateDevTools - if true, enable XState dev tools on the form's model.
  *   Defaults to false; should remain false in production.
  *   Only useful when developing this library.
  */

package/src/packaged-forms/SignupForm.jsx

@@ -6,23 +6,23 @@ import PackagedUniversalForm from "./UniversalForm";
  * A fully functional Userfront signup form
  *
  * @param {object} props
- * @param {string} props.tenantId - the tenant ID to use
- * @param {object} props.flow - auth flow to use. By default this is fetched from the server.
- * @param {boolean} props.compact - if true, for the password method, show a "Username and password" button.
+ * @param {string=} props.tenantId - the tenant ID to use
+ * @param {object=} props.flow - auth flow to use. By default this is fetched from the server.
+ * @param {boolean=} props.compact - if true, for the password method, show a "Username and password" button.
  *   If false, show the password entry form alongside the buttons to choose a different factor.
- * @param {string | boolean} props.redirect - URL to redirect to after successful signup.
+ * @param {(string|boolean)=} props.redirect - URL to redirect to after successful signup.
  *   If false, do not redirect.
  *   If absent, use the after-signup path from the server.
- * @param {boolean} props.redirectOnLoadIfLoggedIn - if true, will redirect to the after-signup path on page load
+ * @param {boolean=} props.redirectOnLoadIfLoggedIn - if true, will redirect to the after-signup path on page load
  *     if the user is already logged in
  *   If false, will not redirect on page load.
  *   Defaults to false.
- *   Does not control whether user is redirected after signing up. @see props.redirect
- * @param {boolean} props.shouldFetchFlow - if true (default), fetch the first factors from the server.
+ *   Does not control whether user is redirected after signing up.
+ * @param {boolean=} props.shouldFetchFlow - if true (default), fetch the first factors from the server.
  *   If false, do not fetch the first factors from the server.
  *   Should be left at true in most production use cases.
  *   May be useful in some dev environments.
- * @param {boolean} props.xstateDevTools - if true, enable XState dev tools on the form's model.
+ * @param {boolean=} props.xstateDevTools - if true, enable XState dev tools on the form's model.
  *   Defaults to false; should remain false in production.
  *   Only useful when developing this library.
  */

package/src/packaged-forms/UniversalForm.jsx

@@ -11,24 +11,24 @@ import { useMachine } from "@xstate/react";
  * signup, login, requesting password reset, and setting a new password.
  *
  * @param {object} props
- * @param {string} props.type - the form type: "signup", "login", "reset"
- * @param {string} props.tenantId - the tenant ID to use
- * @param {object} props.flow - auth flow to use. By default this is fetched from the server.
- * @param {boolean} props.compact - if true, for the password method, show a "Username and password" button.
+ * @param {string=} props.type - the form type: "signup", "login", "reset"
+ * @param {string=} props.tenantId - the tenant ID to use
+ * @param {object=} props.flow - auth flow to use. By default this is fetched from the server.
+ * @param {boolean=} props.compact - if true, for the password method, show a "Username and password" button.
  *   If false, show the password entry form alongside the buttons to choose a different factor.
- * @param {string | boolean} props.redirect - URL to redirect to after successful login.
+ * @param {(string|boolean)=} props.redirect - URL to redirect to after successful login.
  *   If false, do not redirect.
  *   If absent, use the after-login path from the server.
- * @param {boolean} props.redirectOnLoadIfLoggedIn - if true, will redirect to the after-signup path on page load
+ * @param {boolean=} props.redirectOnLoadIfLoggedIn - if true, will redirect to the after-signup path on page load
  *     if the user is already logged in
  *   If false, will not redirect on page load.
  *   Defaults to false.
- *   Does not control whether user is redirected after signing up. @see props.redirect
- * @param {boolean} props.shouldFetchFlow - if true (default), fetch the first factors from the server.
+ *   Does not control whether user is redirected after signing up.
+ * @param {boolean=} props.shouldFetchFlow - if true (default), fetch the first factors from the server.
  *   If false, do not fetch the first factors from the server.
  *   Should be left at true in most production use cases.
  *   May be useful in some dev environments.
- * @param {boolean} props.xstateDevTools - if true, enable XState dev tools on the form's model.
+ * @param {boolean=} props.xstateDevTools - if true, enable XState dev tools on the form's model.
  *   Defaults to false; should remain false in production.
  *   Only useful when developing this library.
  */

package/types/index.d.ts

@@ -0,0 +1,26 @@
+/* 
+  Manually adjusted .d.ts for index.js
+  The auto-generated index.d.ts file does not pick up the CoreJS import,
+  so this adds that import. The import paths in this file reflect the
+  expected auto-generated paths and are not expected to be present
+  relative to this file.
+
+  During build, this is copied directly into the dist directory.
+*/
+
+export { default as SignupForm } from "./packaged-forms/SignupForm";
+export { default as LoginForm } from "./packaged-forms/LoginForm";
+export { default as PasswordResetForm } from "./packaged-forms/PasswordResetForm";
+export { default as LogoutButton } from "./components/LogoutButton";
+export namespace _devTools {
+  export { UnboundUniversalForm };
+  export { createUniversalFormModel };
+  export { defaultUniversalFormContext };
+  export { overrideUserfrontSingleton };
+}
+export default Userfront;
+import { default as UnboundUniversalForm } from "./forms/UniversalForm";
+import { default as createUniversalFormModel } from "./models/forms/universal";
+import { defaultAuthContext as defaultUniversalFormContext } from "./models/forms/universal";
+import { overrideUserfrontSingleton } from "./services/userfront";
+import * as Userfront from "@userfront/core";