Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add correct TS .d.ts type declarations #75

Merged
merged 10 commits into from
Oct 11, 2023
54 changes: 53 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 0 additions & 6 deletions package/build/build.cjs
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -50,9 +49,6 @@ const rollupOptions = {

const esmPlugins = [
react(),
dts({
insertTypesEntry: true,
}),
cssInjectedByJsPlugin()
];

Expand All @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions package/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package/package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion package/src/components/BackButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions package/src/components/LogoutButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down
5 changes: 2 additions & 3 deletions package/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.`);
};

/*
Expand Down
16 changes: 8 additions & 8 deletions package/src/packaged-forms/LoginForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
6 changes: 3 additions & 3 deletions package/src/packaged-forms/PasswordResetForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
16 changes: 8 additions & 8 deletions package/src/packaged-forms/SignupForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
18 changes: 9 additions & 9 deletions package/src/packaged-forms/UniversalForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
26 changes: 26 additions & 0 deletions package/types/index.d.ts
Original file line number Diff line number Diff line change
@@ -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";