diff --git a/package.json b/package.json index 76b8d4981ec..5c581389524 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,13 @@ "upgrade-internal": "bash scripts/upgrade-internal.bash" }, "resolutions": { - "eslint": "^8.55.0" + "eslint": "^8.55.0", + "jest": "29.7.0" }, "packageManager": "yarn@1.22.21", "devDependencies": { "@microsoft/api-extractor": "7.38.2", + "@testing-library/react": "16.2.0", "@typescript-eslint/eslint-plugin": "6.21.0", "@typescript-eslint/parser": "6.21.0", "esbuild": "0.17.18", @@ -51,12 +53,24 @@ "eslint-plugin-react": "^7.33.2", "if-env": "^1.0.4", "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", "lerna": "^7.4.2", "nx": "^16", "prettier": "2.8.8", "ts-node": "^10.9.2", "tsconfig-paths": "^4.2.0", - "typescript": "5.2.2" + "typescript": "5.2.2", + "storybook": "8.5.5", + "storybook-addon-mock": "5.0.0", + "@storybook/addon-essentials": "8.5.5", + "@storybook/addon-interactions": "8.5.5", + "@storybook/addon-links": "8.5.5", + "@storybook/addon-webpack5-compiler-swc": "2.1.0", + "@storybook/react": "8.5.5", + "@storybook/react-webpack5": "8.5.5", + "@storybook/test": "8.5.5", + "@storybook/test-runner": "0.21.0", + "@storybook/testing-library": "0.2.2" }, "workspaces": [ "packages/auth-api", diff --git a/packages/create-plasmic-app/.eslintrc.js b/packages/create-plasmic-app/.eslintrc.js deleted file mode 100644 index 3a1501278c3..00000000000 --- a/packages/create-plasmic-app/.eslintrc.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - root: true, - env: { - browser: true, - es2020: true, - }, - extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"], - parser: "@typescript-eslint/parser", - parserOptions: { - ecmaVersion: 11, - sourceType: "module", - }, - plugins: ["@typescript-eslint"], - rules: {}, -}; diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/eslint.config.js b/packages/create-plasmic-app/cpa-out/react-codegen-js/eslint.config.js new file mode 100644 index 00000000000..238d2e4e643 --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/eslint.config.js @@ -0,0 +1,38 @@ +import js from '@eslint/js' +import globals from 'globals' +import react from 'eslint-plugin-react' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' + +export default [ + { ignores: ['dist'] }, + { + files: ['**/*.{js,jsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + settings: { react: { version: '18.3' } }, + plugins: { + react, + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...js.configs.recommended.rules, + ...react.configs.recommended.rules, + ...react.configs['jsx-runtime'].rules, + ...reactHooks.configs.recommended.rules, + 'react/jsx-no-target-blank': 'off', + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +] diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/package.json b/packages/create-plasmic-app/cpa-out/react-codegen-js/package.json index 93b956a1ef6..48cc9c35275 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/package.json +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/package.json @@ -1,40 +1,30 @@ { "name": "react-codegen-js", - "version": "0.1.0", "private": true, - "dependencies": { - "@plasmicapp/cli": "^0.1.231", - "@plasmicapp/react-web": "^0.2.174", - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^13.0.0", - "@testing-library/user-event": "^13.2.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-scripts": "5.0.1", - "web-vitals": "^2.1.0" - }, + "version": "0.0.0", + "type": "module", "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "dependencies": { + "@plasmicapp/cli": "^0.1.335", + "@plasmicapp/react-web": "^0.2.366", + "react": "^19.0.0", + "react-dom": "^19.0.0" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "devDependencies": { + "@eslint/js": "^9.19.0", + "@types/react": "^19.0.8", + "@types/react-dom": "^19.0.3", + "@vitejs/plugin-react": "^4.3.4", + "eslint": "^9.19.0", + "eslint-plugin-react": "^7.37.4", + "eslint-plugin-react-hooks": "^5.0.0", + "eslint-plugin-react-refresh": "^0.4.18", + "globals": "^15.14.0", + "vite": "^6.1.0" } } diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/plasmic.json b/packages/create-plasmic-app/cpa-out/react-codegen-js/plasmic.json index 232c3d476d3..6b133092f46 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/plasmic.json +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/plasmic.json @@ -10,8 +10,8 @@ "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css" }, "images": { - "scheme": "files", - "publicDir": "../../public", + "scheme": "inlined", + "publicDir": "../public", "publicUrlPrefix": "/static/" }, "tokens": { @@ -26,7 +26,7 @@ "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ", "projectName": "create-plasmic-app", "version": "latest", - "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css", + "cssFilePath": "plasmic/create_plasmic_app/plasmic.module.css", "components": [ { "id": "6uuAAE1jiCew", @@ -39,7 +39,8 @@ }, "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css", "scheme": "blackbox", - "componentType": "page" + "componentType": "page", + "path": "/" }, { "id": "AO44A-w7hh", @@ -52,7 +53,8 @@ }, "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css", "scheme": "blackbox", - "componentType": "page" + "componentType": "page", + "path": "/dynamic/[slug]" }, { "id": "TQcvW_pSKi3", @@ -85,8 +87,8 @@ "icons": [ { "id": "gj-_D7n31Ho", - "name": "ChecksvgIcon", - "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx" + "name": "CheckSvgIcon", + "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.jsx" }, { "id": "6PNxx3YMyDQ", @@ -97,18 +99,22 @@ "images": [], "indirect": false, "globalContextsFilePath": "", + "splitsProviderFilePath": "", "codeComponents": [ { "id": "P6aGdYWZ2R", "name": "PlasmicHead", + "displayName": "hostless-plasmic-head", "componentImportPath": "@plasmicapp/react-web" }, { "id": "8G2A-uTjGa", "name": "Fetcher", + "displayName": "plasmic-data-source-fetcher", "componentImportPath": "@plasmicapp/react-web/lib/data-sources" } - ] + ], + "customFunctions": [] } ], "globalVariants": { @@ -122,6 +128,6 @@ ] }, "wrapPagesWithGlobalContexts": true, - "cliVersion": "0.1.231", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.231/dist/plasmic.schema.json" + "cliVersion": "0.1.335", + "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.335/dist/plasmic.schema.json" } diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/App.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/App.jsx index 0dc75aae1be..dce251f6151 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/App.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/App.jsx @@ -1,9 +1,9 @@ import Homepage from './components/Homepage'; + function App() { return (); } export default App; - \ No newline at end of file diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/Button.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/Button.jsx index 8a75f3f65ed..bf0415c382a 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/Button.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/Button.jsx @@ -8,6 +8,4 @@ function Button_(props, ref) { const Button = React.forwardRef(Button_); -export default Object.assign(Button, { - __plumeType: "button" -}); +export default Object.assign(Button, { __plumeType: "button" }); diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx index 9377a0dbf33..d038c5a1aae 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx @@ -9,22 +9,26 @@ // Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 // Component: TQcvW_pSKi3 import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; -import * as pp from "@plasmicapp/react-web"; import { - hasVariant, + Stack as Stack__, classNames, createPlasmicElementProxy, - useTrigger, - deriveRenderOpts + deriveRenderOpts, + hasVariant, + renderPlasmicSlot, + useDollarState, + useTrigger } from "@plasmicapp/react-web"; +import { useDataEnv } from "@plasmicapp/react-web/lib/host"; +import * as pp from "@plasmicapp/react-web"; import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicButton.module.css"; // plasmic-import: TQcvW_pSKi3/css -import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon +import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon +createPlasmicElementProxy; + export const PlasmicButton__VariantProps = new Array( "showStartIcon", "showEndIcon", @@ -38,86 +42,79 @@ export const PlasmicButton__ArgProps = new Array( "children", "startIcon", "endIcon", - "link" + "link", + "submitsForm" ); -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicButton__RenderFunc(props) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); const stateSpecs = React.useMemo( () => [ { path: "showStartIcon", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showStartIcon - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.showStartIcon }, { path: "showEndIcon", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showEndIcon - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.showEndIcon }, { path: "isDisabled", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.isDisabled - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.isDisabled }, { path: "shape", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.shape - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.shape }, { path: "size", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.size - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.size }, { path: "color", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.color - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.color } ], - [$props, $ctx] + [$props, $ctx, $refs] ); - - const $state = p.useDollarState(stateSpecs, { $props, $ctx, $queries }); + const $state = useDollarState(stateSpecs, { + $props, + $ctx, + $queries: {}, + $refs + }); const [isRootFocusVisibleWithin, triggerRootFocusVisibleWithinProps] = useTrigger("useFocusVisibleWithin", { isTextInput: false @@ -126,7 +123,7 @@ function PlasmicButton__RenderFunc(props) { focusVisibleWithin_root: isRootFocusVisibleWithin }; return ( - - {p.renderPlasmicSlot({ + {renderPlasmicSlot({ defaultContents: ( - @@ -238,61 +233,51 @@ function PlasmicButton__RenderFunc(props) { "color", "blue" ), - [sty.slotTargetStartIconcolor_clear]: hasVariant( $state, "color", "clear" ), - [sty.slotTargetStartIconcolor_link]: hasVariant( $state, "color", "link" ), - [sty.slotTargetStartIconcolor_softBlue]: hasVariant( $state, "color", "softBlue" ), - [sty.slotTargetStartIconcolor_softGreen]: hasVariant( $state, "color", "softGreen" ), - [sty.slotTargetStartIconcolor_softRed]: hasVariant( $state, "color", "softRed" ), - [sty.slotTargetStartIconcolor_softSand]: hasVariant( $state, "color", "softSand" ), - [sty.slotTargetStartIconcolor_softYellow]: hasVariant( $state, "color", "softYellow" ), - [sty.slotTargetStartIconcolor_white]: hasVariant( $state, "color", "white" ), - [sty.slotTargetStartIconcolor_yellow]: hasVariant( $state, "color", "yellow" ), - [sty.slotTargetStartIconshowStartIcon]: hasVariant( $state, "showStartIcon", @@ -302,7 +287,6 @@ function PlasmicButton__RenderFunc(props) { })} ) : null} -
- {p.renderPlasmicSlot({ + {renderPlasmicSlot({ defaultContents: "Button", value: args.children, className: classNames(sty.slotTargetChildren, { @@ -339,25 +321,21 @@ function PlasmicButton__RenderFunc(props) { "color", "blue" ), - [sty.slotTargetChildrencolor_clear]: hasVariant( $state, "color", "clear" ), - [sty.slotTargetChildrencolor_green]: hasVariant( $state, "color", "green" ), - [sty.slotTargetChildrencolor_link]: hasVariant( $state, "color", "link" ), - [sty.slotTargetChildrencolor_link_size_minimal]: hasVariant($state, "color", "link") && hasVariant($state, "size", "minimal"), @@ -366,79 +344,66 @@ function PlasmicButton__RenderFunc(props) { "color", "red" ), - [sty.slotTargetChildrencolor_sand]: hasVariant( $state, "color", "sand" ), - [sty.slotTargetChildrencolor_softBlue]: hasVariant( $state, "color", "softBlue" ), - [sty.slotTargetChildrencolor_softGreen]: hasVariant( $state, "color", "softGreen" ), - [sty.slotTargetChildrencolor_softRed]: hasVariant( $state, "color", "softRed" ), - [sty.slotTargetChildrencolor_softSand]: hasVariant( $state, "color", "softSand" ), - [sty.slotTargetChildrencolor_softYellow]: hasVariant( $state, "color", "softYellow" ), - [sty.slotTargetChildrencolor_white]: hasVariant( $state, "color", "white" ), - [sty.slotTargetChildrencolor_yellow]: hasVariant( $state, "color", "yellow" ), - [sty.slotTargetChildrenisDisabled]: hasVariant( $state, "isDisabled", "isDisabled" ), - [sty.slotTargetChildrenshape_rounded]: hasVariant( $state, "shape", "rounded" ), - [sty.slotTargetChildrenshowEndIcon]: hasVariant( $state, "showEndIcon", "showEndIcon" ), - [sty.slotTargetChildrenshowStartIcon]: hasVariant( $state, "showStartIcon", "showStartIcon" ), - [sty.slotTargetChildrensize_minimal]: hasVariant( $state, "size", @@ -447,7 +412,6 @@ function PlasmicButton__RenderFunc(props) { }) })}
- {(hasVariant($state, "showEndIcon", "showEndIcon") ? true : false) ? (
- {p.renderPlasmicSlot({ + {renderPlasmicSlot({ defaultContents: ( ) : null} - + ); } @@ -567,7 +520,6 @@ function useBehavior(props, ref) { }, ref ); - return b; } @@ -584,13 +536,12 @@ function makeNodeComponent(nodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicButton__ArgProps, internalVariantPropNames: PlasmicButton__VariantProps }), [props, nodeName] ); - return PlasmicButton__RenderFunc({ variants, args, diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx index 717692e251b..d97cbe26d97 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx @@ -9,43 +9,45 @@ // Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 // Component: AO44A-w7hh import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; import { + Stack as Stack__, classNames, createPlasmicElementProxy, deriveRenderOpts } from "@plasmicapp/react-web"; +import { useDataEnv } from "@plasmicapp/react-web/lib/host"; import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css +createPlasmicElementProxy; + export const PlasmicDynamicPage__VariantProps = new Array(); export const PlasmicDynamicPage__ArgProps = new Array(); -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicDynamicPage__RenderFunc(props) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); return (
@@ -59,10 +61,11 @@ function PlasmicDynamicPage__RenderFunc(props) { projectcss.root_reset, projectcss.plasmic_default_styles, projectcss.plasmic_mixins, + projectcss.plasmic_tokens, sty.root )} > - - {(() => { - try { - return $ctx.params.slug; - } catch (e) { - if (e instanceof TypeError) { - return "Page 1"; + + {(() => { + try { + return $ctx.params.slug; + } catch (e) { + if ( + e instanceof TypeError || + e?.plasmicType === "PlasmicUndefinedDataError" + ) { + return "Page 1"; + } + throw e; } - throw e; - } - })()} + })()} + - - +
@@ -119,13 +126,12 @@ function makeNodeComponent(nodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicDynamicPage__ArgProps, internalVariantPropNames: PlasmicDynamicPage__VariantProps }), [props, nodeName] ); - return PlasmicDynamicPage__RenderFunc({ variants, args, diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx index 4f6f0569160..f24c8881f0c 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx @@ -3,25 +3,13 @@ /* tslint:disable */ /* prettier-ignore-start */ import * as React from "react"; -import * as p from "@plasmicapp/react-web"; +import { createUseScreenVariants } from "@plasmicapp/react-web"; export const ScreenContext = React.createContext( "PLEASE_RENDER_INSIDE_PROVIDER" ); -/** - * @deprecated Plasmic now uses a custom hook for Screen variants, which is - * automatically included in your components. Please remove this provider - * from your code. - */ -export function ScreenVariantProvider(props) { - console.warn( - "DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code." - ); - return props.children; -} - -export const useScreenVariants = p.createUseScreenVariants(true, { +export const useScreenVariants = createUseScreenVariants(true, { desktopOnly: "(min-width:768px)", }); diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx index c86ab9d90b1..671896d4101 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx @@ -9,46 +9,48 @@ // Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 // Component: 6uuAAE1jiCew import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; import { - hasVariant, + Stack as Stack__, classNames, createPlasmicElementProxy, deriveRenderOpts, - ensureGlobalVariants + ensureGlobalVariants, + hasVariant } from "@plasmicapp/react-web"; +import { useDataEnv } from "@plasmicapp/react-web/lib/host"; import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css +createPlasmicElementProxy; + export const PlasmicHomepage__VariantProps = new Array(); export const PlasmicHomepage__ArgProps = new Array(); -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicHomepage__RenderFunc(props) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); const globalVariants = ensureGlobalVariants({ screen: useScreenVariantsscBjPxgdxdzbv() }); @@ -65,10 +67,11 @@ function PlasmicHomepage__RenderFunc(props) { projectcss.root_reset, projectcss.plasmic_default_styles, projectcss.plasmic_mixins, + projectcss.plasmic_tokens, sty.root )} > - {"create-plasmic-app"} -
{ - "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template—do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase—press the " + "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template\u2014do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase\u2014press the " } )}
- -
+ @@ -162,13 +163,12 @@ function makeNodeComponent(nodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicHomepage__ArgProps, internalVariantPropNames: PlasmicHomepage__VariantProps }), [props, nodeName] ); - return PlasmicHomepage__RenderFunc({ variants, args, diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx index e96c8c03551..3875377b9cf 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx @@ -9,42 +9,43 @@ // Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 // Component: Q23H1_1M_P import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; import { classNames, createPlasmicElementProxy, deriveRenderOpts } from "@plasmicapp/react-web"; +import { useDataEnv } from "@plasmicapp/react-web/lib/host"; import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component import "@plasmicapp/react-web/lib/plasmic.css"; import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css +createPlasmicElementProxy; + export const PlasmicRandomDynamicPageButton__VariantProps = new Array(); export const PlasmicRandomDynamicPageButton__ArgProps = new Array(); -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicRandomDynamicPageButton__RenderFunc(props) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); return ( @@ -124,13 +111,12 @@ function makeNodeComponent(nodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps, internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps }), [props, nodeName] ); - return PlasmicRandomDynamicPageButton__RenderFunc({ variants, args, diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx index f79d6f56e48..449af59b5aa 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx @@ -5,7 +5,7 @@ import React from "react"; import { classNames } from "@plasmicapp/react-web"; -export function ChecksvgIcon(props) { +export function CheckSvgIcon(props) { const { className, style, title, ...restProps } = props; return ( - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/main.jsx b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/main.jsx new file mode 100644 index 00000000000..b9a1a6deac8 --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/reportWebVitals.js b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad9e6..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/setupTests.js b/packages/create-plasmic-app/cpa-out/react-codegen-js/src/setupTests.js deleted file mode 100644 index 8f2609b7b3e..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-codegen-js/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-js/vite.config.js b/packages/create-plasmic-app/cpa-out/react-codegen-js/vite.config.js new file mode 100644 index 00000000000..8b0f57b91ae --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-js/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/eslint.config.js b/packages/create-plasmic-app/cpa-out/react-codegen-ts/eslint.config.js new file mode 100644 index 00000000000..092408a9f09 --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/eslint.config.js @@ -0,0 +1,28 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' + +export default tseslint.config( + { ignores: ['dist'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +) diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/package.json b/packages/create-plasmic-app/cpa-out/react-codegen-ts/package.json index 6da11b45bb6..970fdcccf89 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/package.json +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/package.json @@ -1,45 +1,31 @@ { "name": "react-codegen-ts", - "version": "0.1.0", "private": true, - "dependencies": { - "@plasmicapp/cli": "^0.1.231", - "@plasmicapp/react-web": "^0.2.174", - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^13.0.0", - "@testing-library/user-event": "^13.2.1", - "@types/jest": "^27.0.1", - "@types/node": "^16.7.13", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-scripts": "5.0.1", - "typescript": "^4.4.2", - "web-vitals": "^2.1.0" - }, + "version": "0.0.0", + "type": "module", "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "dependencies": { + "@plasmicapp/cli": "^0.1.335", + "@plasmicapp/react-web": "^0.2.366", + "react": "^19.0.0", + "react-dom": "^19.0.0" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "devDependencies": { + "@eslint/js": "^9.19.0", + "@types/react": "^19.0.8", + "@types/react-dom": "^19.0.3", + "@vitejs/plugin-react": "^4.3.4", + "eslint": "^9.19.0", + "eslint-plugin-react-hooks": "^5.0.0", + "eslint-plugin-react-refresh": "^0.4.18", + "globals": "^15.14.0", + "typescript": "~5.7.2", + "typescript-eslint": "^8.22.0", + "vite": "^6.1.0" } } diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/plasmic.json b/packages/create-plasmic-app/cpa-out/react-codegen-ts/plasmic.json index 28147da3423..9374def0a41 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/plasmic.json +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/plasmic.json @@ -10,8 +10,8 @@ "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css" }, "images": { - "scheme": "files", - "publicDir": "../../public", + "scheme": "inlined", + "publicDir": "../public", "publicUrlPrefix": "/static/" }, "tokens": { @@ -26,7 +26,7 @@ "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ", "projectName": "create-plasmic-app", "version": "latest", - "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css", + "cssFilePath": "plasmic/create_plasmic_app/plasmic.module.css", "components": [ { "id": "6uuAAE1jiCew", @@ -39,7 +39,8 @@ }, "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css", "scheme": "blackbox", - "componentType": "page" + "componentType": "page", + "path": "/" }, { "id": "AO44A-w7hh", @@ -52,7 +53,8 @@ }, "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css", "scheme": "blackbox", - "componentType": "page" + "componentType": "page", + "path": "/dynamic/[slug]" }, { "id": "TQcvW_pSKi3", @@ -85,8 +87,8 @@ "icons": [ { "id": "gj-_D7n31Ho", - "name": "ChecksvgIcon", - "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx" + "name": "CheckSvgIcon", + "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.tsx" }, { "id": "6PNxx3YMyDQ", @@ -97,18 +99,22 @@ "images": [], "indirect": false, "globalContextsFilePath": "", + "splitsProviderFilePath": "", "codeComponents": [ { "id": "P6aGdYWZ2R", "name": "PlasmicHead", + "displayName": "hostless-plasmic-head", "componentImportPath": "@plasmicapp/react-web" }, { "id": "8G2A-uTjGa", "name": "Fetcher", + "displayName": "plasmic-data-source-fetcher", "componentImportPath": "@plasmicapp/react-web/lib/data-sources" } - ] + ], + "customFunctions": [] } ], "globalVariants": { @@ -122,6 +128,6 @@ ] }, "wrapPagesWithGlobalContexts": true, - "cliVersion": "0.1.231", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.231/dist/plasmic.schema.json" + "cliVersion": "0.1.335", + "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.335/dist/plasmic.schema.json" } diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/App.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/App.tsx index 0dc75aae1be..dce251f6151 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/App.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/App.tsx @@ -1,9 +1,9 @@ import Homepage from './components/Homepage'; + function App() { return (); } export default App; - \ No newline at end of file diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/Button.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/Button.tsx index 34bcc1b8e60..ed81532849a 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/Button.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/Button.tsx @@ -3,13 +3,14 @@ import { PlasmicButton, DefaultButtonProps } from "./plasmic/create_plasmic_app/PlasmicButton"; + import { ButtonRef, HtmlAnchorOnlyProps, HtmlButtonOnlyProps } from "@plasmicapp/react-web"; -interface ButtonProps extends DefaultButtonProps { +export interface ButtonProps extends DefaultButtonProps { // Feel free to add any additional props that this component should receive } function Button_(props: ButtonProps, ref: ButtonRef) { @@ -17,7 +18,7 @@ function Button_(props: ButtonProps, ref: ButtonRef) { return ; } -type ButtonComponentType = { +export type ButtonComponentType = { ( props: Omit & { ref?: React.Ref; @@ -31,6 +32,4 @@ type ButtonComponentType = { }; const Button = React.forwardRef(Button_) as any as ButtonComponentType; -export default Object.assign(Button, { - __plumeType: "button" -}); +export default Object.assign(Button, { __plumeType: "button" }); diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx index fc1a5937570..6c718868d0b 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx @@ -13,35 +13,60 @@ import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - -import * as pp from "@plasmicapp/react-web"; import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, + Flex as Flex__, MultiChoiceArg, + PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__, + PlasmicIcon as PlasmicIcon__, + PlasmicImg as PlasmicImg__, + PlasmicLink as PlasmicLink__, + PlasmicPageGuard as PlasmicPageGuard__, SingleBooleanChoiceArg, SingleChoiceArg, - pick, - omit, - useTrigger, + Stack as Stack__, StrictProps, + Trans as Trans__, + classNames, + createPlasmicElementProxy, deriveRenderOpts, - ensureGlobalVariants + ensureGlobalVariants, + generateOnMutateForSpec, + generateStateOnChangeProp, + generateStateOnChangePropForCodeComponents, + generateStateValueProp, + get as $stateGet, + hasVariant, + initializeCodeComponentStates, + initializePlasmicStates, + makeFragment, + omit, + pick, + renderPlasmicSlot, + set as $stateSet, + useCurrentUser, + useDollarState, + usePlasmicTranslator, + useTrigger, + wrapWithClassName } from "@plasmicapp/react-web"; +import { + DataCtxReader as DataCtxReader__, + useDataEnv, + useGlobalActions +} from "@plasmicapp/react-web/lib/host"; + +import * as pp from "@plasmicapp/react-web"; import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicButton.module.css"; // plasmic-import: TQcvW_pSKi3/css -import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon +import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon +createPlasmicElementProxy; + export type PlasmicButton__VariantMembers = { showStartIcon: "showStartIcon"; showEndIcon: "showEndIcon"; @@ -100,23 +125,26 @@ export type PlasmicButton__ArgsType = { startIcon?: React.ReactNode; endIcon?: React.ReactNode; link?: string; + submitsForm?: boolean; }; type ArgPropType = keyof PlasmicButton__ArgsType; export const PlasmicButton__ArgProps = new Array( "children", "startIcon", "endIcon", - "link" + "link", + "submitsForm" ); export type PlasmicButton__OverridesType = { - root?: p.Flex<"button">; - startIconContainer?: p.Flex<"div">; - contentContainer?: p.Flex<"div">; - endIconContainer?: p.Flex<"div">; + root?: Flex__<"button">; + startIconContainer?: Flex__<"div">; + contentContainer?: Flex__<"div">; + endIconContainer?: Flex__<"div">; }; export interface DefaultButtonProps extends pp.BaseButtonProps { + submitsForm?: boolean; shape?: SingleChoiceArg<"rounded" | "round" | "sharp">; size?: SingleChoiceArg<"compact" | "minimal">; color?: SingleChoiceArg< @@ -136,13 +164,7 @@ export interface DefaultButtonProps extends pp.BaseButtonProps { >; } -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicButton__RenderFunc(props: { variants: PlasmicButton__VariantsArgs; @@ -152,72 +174,73 @@ function PlasmicButton__RenderFunc(props: { }) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - const stateSpecs = React.useMemo( + const stateSpecs: Parameters[0] = React.useMemo( () => [ { path: "showStartIcon", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showStartIcon - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.showStartIcon }, { path: "showEndIcon", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showEndIcon - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.showEndIcon }, { path: "isDisabled", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.isDisabled - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.isDisabled }, { path: "shape", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.shape - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.shape }, { path: "size", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.size - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.size }, { path: "color", type: "private", variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.color - : undefined + initFunc: ({ $props, $state, $queries, $ctx }) => $props.color } ], - [$props, $ctx] + [$props, $ctx, $refs] ); - const $state = p.useDollarState(stateSpecs, { $props, $ctx, $queries }); + const $state = useDollarState(stateSpecs, { + $props, + $ctx, + $queries: {}, + $refs + }); const [isRootFocusVisibleWithin, triggerRootFocusVisibleWithinProps] = useTrigger("useFocusVisibleWithin", { @@ -228,7 +251,7 @@ function PlasmicButton__RenderFunc(props: { }; return ( - - {p.renderPlasmicSlot({ + {renderPlasmicSlot({ defaultContents: ( - @@ -391,7 +415,6 @@ function PlasmicButton__RenderFunc(props: { })} ) : null} -
- {p.renderPlasmicSlot({ + {renderPlasmicSlot({ defaultContents: "Button", value: args.children, className: classNames(sty.slotTargetChildren, { @@ -517,7 +540,6 @@ function PlasmicButton__RenderFunc(props: { }) })}
- {(hasVariant($state, "showEndIcon", "showEndIcon") ? true : false) ? (
- {p.renderPlasmicSlot({ + {renderPlasmicSlot({ defaultContents: ( ) : null} - + ) as React.ReactElement | null; } -function useBehavior

( +function useBehavior

( props: P, ref: pp.ButtonRef ) { @@ -683,7 +705,7 @@ function makeNodeComponent(nodeName: NodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicButton__ArgProps, internalVariantPropNames: PlasmicButton__VariantProps }), diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx index 57b0df30bba..293c61b337d 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx @@ -13,32 +13,57 @@ import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, + Flex as Flex__, MultiChoiceArg, + PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__, + PlasmicIcon as PlasmicIcon__, + PlasmicImg as PlasmicImg__, + PlasmicLink as PlasmicLink__, + PlasmicPageGuard as PlasmicPageGuard__, SingleBooleanChoiceArg, SingleChoiceArg, - pick, - omit, - useTrigger, + Stack as Stack__, StrictProps, + Trans as Trans__, + classNames, + createPlasmicElementProxy, deriveRenderOpts, - ensureGlobalVariants + ensureGlobalVariants, + generateOnMutateForSpec, + generateStateOnChangeProp, + generateStateOnChangePropForCodeComponents, + generateStateValueProp, + get as $stateGet, + hasVariant, + initializeCodeComponentStates, + initializePlasmicStates, + makeFragment, + omit, + pick, + renderPlasmicSlot, + set as $stateSet, + useCurrentUser, + useDollarState, + usePlasmicTranslator, + useTrigger, + wrapWithClassName } from "@plasmicapp/react-web"; +import { + DataCtxReader as DataCtxReader__, + useDataEnv, + useGlobalActions +} from "@plasmicapp/react-web/lib/host"; + import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css +createPlasmicElementProxy; + export type PlasmicDynamicPage__VariantMembers = {}; export type PlasmicDynamicPage__VariantsArgs = {}; type VariantPropType = keyof PlasmicDynamicPage__VariantsArgs; @@ -49,23 +74,17 @@ type ArgPropType = keyof PlasmicDynamicPage__ArgsType; export const PlasmicDynamicPage__ArgProps = new Array(); export type PlasmicDynamicPage__OverridesType = { - root?: p.Flex<"div">; - section?: p.Flex<"section">; - h1?: p.Flex<"h1">; - randomDynamicPageButton?: p.Flex; + root?: Flex__<"div">; + section?: Flex__<"section">; + h1?: Flex__<"h1">; + randomDynamicPageButton?: Flex__; }; export interface DefaultDynamicPageProps { className?: string; } -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicDynamicPage__RenderFunc(props: { variants: PlasmicDynamicPage__VariantsArgs; @@ -75,23 +94,28 @@ function PlasmicDynamicPage__RenderFunc(props: { }) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - return ( - {} -

- - {(() => { - try { - return $ctx.params.slug; - } catch (e) { - if (e instanceof TypeError) { - return "Page 1"; + + {(() => { + try { + return $ctx.params.slug; + } catch (e) { + if ( + e instanceof TypeError || + e?.plasmicType === "PlasmicUndefinedDataError" + ) { + return "Page 1"; + } + throw e; } - throw e; - } - })()} + })()} + - - +
@@ -200,7 +229,7 @@ function makeNodeComponent(nodeName: NodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicDynamicPage__ArgProps, internalVariantPropNames: PlasmicDynamicPage__VariantProps }), diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx index f97963f0ca5..e264d35666a 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx @@ -4,26 +4,14 @@ /* prettier-ignore-start */ import * as React from "react"; -import * as p from "@plasmicapp/react-web"; +import { createUseScreenVariants } from "@plasmicapp/react-web"; export type ScreenValue = "desktopOnly"; export const ScreenContext = React.createContext( "PLEASE_RENDER_INSIDE_PROVIDER" as any ); -/** - * @deprecated Plasmic now uses a custom hook for Screen variants, which is - * automatically included in your components. Please remove this provider - * from your code. - */ -export function ScreenVariantProvider(props: React.PropsWithChildren) { - console.warn( - "DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code." - ); - return props.children; -} - -export const useScreenVariants = p.createUseScreenVariants(true, { +export const useScreenVariants = createUseScreenVariants(true, { desktopOnly: "(min-width:768px)", }); diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx index 8e3d8cf6262..9c15e7945be 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx @@ -13,34 +13,60 @@ import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, + Flex as Flex__, MultiChoiceArg, + PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__, + PlasmicIcon as PlasmicIcon__, + PlasmicImg as PlasmicImg__, + PlasmicLink as PlasmicLink__, + PlasmicPageGuard as PlasmicPageGuard__, SingleBooleanChoiceArg, SingleChoiceArg, - pick, - omit, - useTrigger, + Stack as Stack__, StrictProps, + Trans as Trans__, + classNames, + createPlasmicElementProxy, deriveRenderOpts, - ensureGlobalVariants + ensureGlobalVariants, + generateOnMutateForSpec, + generateStateOnChangeProp, + generateStateOnChangePropForCodeComponents, + generateStateValueProp, + get as $stateGet, + hasVariant, + initializeCodeComponentStates, + initializePlasmicStates, + makeFragment, + omit, + pick, + renderPlasmicSlot, + set as $stateSet, + useCurrentUser, + useDollarState, + usePlasmicTranslator, + useTrigger, + wrapWithClassName } from "@plasmicapp/react-web"; +import { + DataCtxReader as DataCtxReader__, + useDataEnv, + useGlobalActions +} from "@plasmicapp/react-web/lib/host"; + import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component +import { Fetcher } from "@plasmicapp/react-web/lib/data-sources"; import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css +createPlasmicElementProxy; + export type PlasmicHomepage__VariantMembers = {}; export type PlasmicHomepage__VariantsArgs = {}; type VariantPropType = keyof PlasmicHomepage__VariantsArgs; @@ -51,24 +77,18 @@ type ArgPropType = keyof PlasmicHomepage__ArgsType; export const PlasmicHomepage__ArgProps = new Array(); export type PlasmicHomepage__OverridesType = { - root?: p.Flex<"div">; - section?: p.Flex<"section">; - h1?: p.Flex<"h1">; - text?: p.Flex<"div">; - randomDynamicPageButton?: p.Flex; + root?: Flex__<"div">; + section?: Flex__<"section">; + h1?: Flex__<"h1">; + text?: Flex__<"div">; + randomDynamicPageButton?: Flex__; }; export interface DefaultHomepageProps { className?: string; } -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicHomepage__RenderFunc(props: { variants: PlasmicHomepage__VariantsArgs; @@ -78,27 +98,32 @@ function PlasmicHomepage__RenderFunc(props: { }) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - const globalVariants = ensureGlobalVariants({ screen: useScreenVariantsscBjPxgdxdzbv() }); return ( - {} -
- {"create-plasmic-app"} -
{ - "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template—do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase—press the " + "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template\u2014do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase\u2014press the " } )}
- -
+
@@ -245,7 +269,7 @@ function makeNodeComponent(nodeName: NodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicHomepage__ArgProps, internalVariantPropNames: PlasmicHomepage__VariantProps }), diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx index 0f34f578fe5..fd918fe5766 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx @@ -13,35 +13,60 @@ import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, + Flex as Flex__, MultiChoiceArg, + PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__, + PlasmicIcon as PlasmicIcon__, + PlasmicImg as PlasmicImg__, + PlasmicLink as PlasmicLink__, + PlasmicPageGuard as PlasmicPageGuard__, SingleBooleanChoiceArg, SingleChoiceArg, - pick, - omit, - useTrigger, + Stack as Stack__, StrictProps, + Trans as Trans__, + classNames, + createPlasmicElementProxy, deriveRenderOpts, - ensureGlobalVariants + ensureGlobalVariants, + generateOnMutateForSpec, + generateStateOnChangeProp, + generateStateOnChangePropForCodeComponents, + generateStateValueProp, + get as $stateGet, + hasVariant, + initializeCodeComponentStates, + initializePlasmicStates, + makeFragment, + omit, + pick, + renderPlasmicSlot, + set as $stateSet, + useCurrentUser, + useDollarState, + usePlasmicTranslator, + useTrigger, + wrapWithClassName } from "@plasmicapp/react-web"; +import { + DataCtxReader as DataCtxReader__, + useDataEnv, + useGlobalActions +} from "@plasmicapp/react-web/lib/host"; + import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss +import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css -import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon +import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon +createPlasmicElementProxy; + export type PlasmicRandomDynamicPageButton__VariantMembers = {}; export type PlasmicRandomDynamicPageButton__VariantsArgs = {}; type VariantPropType = keyof PlasmicRandomDynamicPageButton__VariantsArgs; @@ -54,20 +79,14 @@ export const PlasmicRandomDynamicPageButton__ArgProps = new Array(); export type PlasmicRandomDynamicPageButton__OverridesType = { - root?: p.Flex; + root?: Flex__; }; export interface DefaultRandomDynamicPageButtonProps { className?: string; } -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); +const $$ = {}; function PlasmicRandomDynamicPageButton__RenderFunc(props: { variants: PlasmicRandomDynamicPageButton__VariantsArgs; @@ -77,19 +96,26 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props: { }) { const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); + const args = React.useMemo( + () => + Object.assign( + {}, + Object.fromEntries( + Object.entries(props.args).filter(([_, v]) => v !== undefined) + ) + ), + [props.args] + ); const $props = { ...args, ...variants }; + + const $ctx = useDataEnv?.() || {}; const refsRef = React.useRef({}); const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - return ( @@ -203,7 +216,7 @@ function makeNodeComponent(nodeName: NodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps, internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps }), diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx index 5aa18ce645f..8ab504b3539 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx @@ -5,11 +5,11 @@ import React from "react"; import { classNames } from "@plasmicapp/react-web"; -export type ChecksvgIconProps = React.ComponentProps<"svg"> & { +export type CheckSvgIconProps = React.ComponentProps<"svg"> & { title?: string; }; -export function ChecksvgIcon(props: ChecksvgIconProps) { +export function CheckSvgIcon(props: CheckSvgIconProps) { const { className, style, title, ...restProps } = props; return ( - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/main.tsx b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/main.tsx new file mode 100644 index 00000000000..bef5202a32c --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/react-app-env.d.ts b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5fc6b..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/reportWebVitals.ts b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16e0fb..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/setupTests.ts b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/setupTests.ts deleted file mode 100644 index 8f2609b7b3e..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/vite-env.d.ts b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/vite-env.d.ts new file mode 100644 index 00000000000..11f02fe2a00 --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/tsconfig.json b/packages/create-plasmic-app/cpa-out/react-codegen-ts/tsconfig.json index a273b0cfc0e..1ffef600d95 100644 --- a/packages/create-plasmic-app/cpa-out/react-codegen-ts/tsconfig.json +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/tsconfig.json @@ -1,26 +1,7 @@ { - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } ] } diff --git a/packages/create-plasmic-app/cpa-out/react-codegen-ts/vite.config.ts b/packages/create-plasmic-app/cpa-out/react-codegen-ts/vite.config.ts new file mode 100644 index 00000000000..8b0f57b91ae --- /dev/null +++ b/packages/create-plasmic-app/cpa-out/react-codegen-ts/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/package.json b/packages/create-plasmic-app/cpa-out/react-loader-js/package.json deleted file mode 100644 index b5f020a525d..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "react-loader-js", - "version": "0.1.0", - "private": true, - "dependencies": { - "@plasmicapp/cli": "^0.1.231", - "@plasmicapp/react-web": "^0.2.174", - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^13.0.0", - "@testing-library/user-event": "^13.2.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-scripts": "5.0.1", - "web-vitals": "^2.1.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/plasmic.json b/packages/create-plasmic-app/cpa-out/react-loader-js/plasmic.json deleted file mode 100644 index 232c3d476d3..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/plasmic.json +++ /dev/null @@ -1,127 +0,0 @@ -{ - "platform": "react", - "code": { - "lang": "js", - "scheme": "blackbox", - "reactRuntime": "classic" - }, - "style": { - "scheme": "css-modules", - "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css" - }, - "images": { - "scheme": "files", - "publicDir": "../../public", - "publicUrlPrefix": "/static/" - }, - "tokens": { - "scheme": "theo", - "tokensFilePath": "plasmic-tokens.theo.json" - }, - "srcDir": "src/components", - "defaultPlasmicDir": "./plasmic", - "projects": [ - { - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ", - "projectName": "create-plasmic-app", - "version": "latest", - "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css", - "components": [ - { - "id": "6uuAAE1jiCew", - "name": "Homepage", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.jsx", - "importSpec": { - "modulePath": "Homepage.jsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css", - "scheme": "blackbox", - "componentType": "page" - }, - { - "id": "AO44A-w7hh", - "name": "DynamicPage", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.jsx", - "importSpec": { - "modulePath": "DynamicPage.jsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css", - "scheme": "blackbox", - "componentType": "page" - }, - { - "id": "TQcvW_pSKi3", - "name": "Button", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicButton.jsx", - "importSpec": { - "modulePath": "Button.jsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicButton.module.css", - "scheme": "blackbox", - "componentType": "component", - "plumeType": "button" - }, - { - "id": "Q23H1_1M_P", - "name": "RandomDynamicPageButton", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx", - "importSpec": { - "modulePath": "RandomDynamicPageButton.jsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.module.css", - "scheme": "blackbox", - "componentType": "component" - } - ], - "icons": [ - { - "id": "gj-_D7n31Ho", - "name": "ChecksvgIcon", - "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx" - }, - { - "id": "6PNxx3YMyDQ", - "name": "IconIcon", - "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx" - } - ], - "images": [], - "indirect": false, - "globalContextsFilePath": "", - "codeComponents": [ - { - "id": "P6aGdYWZ2R", - "name": "PlasmicHead", - "componentImportPath": "@plasmicapp/react-web" - }, - { - "id": "8G2A-uTjGa", - "name": "Fetcher", - "componentImportPath": "@plasmicapp/react-web/lib/data-sources" - } - ] - } - ], - "globalVariants": { - "variantGroups": [ - { - "id": "SCBjPXGDXDZBV", - "name": "Screen", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx" - } - ] - }, - "wrapPagesWithGlobalContexts": true, - "cliVersion": "0.1.231", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.231/dist/plasmic.schema.json" -} diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/App.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/App.jsx deleted file mode 100644 index 0dc75aae1be..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/App.jsx +++ /dev/null @@ -1,9 +0,0 @@ - -import Homepage from './components/Homepage'; - -function App() { - return (); -} - -export default App; - \ No newline at end of file diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/Button.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/Button.jsx deleted file mode 100644 index 8a75f3f65ed..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/Button.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from "react"; -import { PlasmicButton } from "./plasmic/create_plasmic_app/PlasmicButton"; - -function Button_(props, ref) { - const { plasmicProps } = PlasmicButton.useBehavior(props, ref); - return ; -} - -const Button = React.forwardRef(Button_); - -export default Object.assign(Button, { - __plumeType: "button" -}); diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/DynamicPage.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/DynamicPage.jsx deleted file mode 100644 index 88f679a82a1..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/DynamicPage.jsx +++ /dev/null @@ -1,26 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import * as React from "react"; -import { PlasmicDynamicPage } from "./plasmic/create_plasmic_app/PlasmicDynamicPage"; - -function DynamicPage_(props, ref) { - // Use PlasmicDynamicPage to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicDynamicPage are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all DynamicPageProps here, but feel free - // to do whatever works for you. - return ; -} - -const DynamicPage = React.forwardRef(DynamicPage_); - -export default DynamicPage; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/Homepage.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/Homepage.jsx deleted file mode 100644 index 24532aca19b..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/Homepage.jsx +++ /dev/null @@ -1,26 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import * as React from "react"; -import { PlasmicHomepage } from "./plasmic/create_plasmic_app/PlasmicHomepage"; - -function Homepage_(props, ref) { - // Use PlasmicHomepage to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicHomepage are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all HomepageProps here, but feel free - // to do whatever works for you. - return ; -} - -const Homepage = React.forwardRef(Homepage_); - -export default Homepage; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/RandomDynamicPageButton.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/RandomDynamicPageButton.jsx deleted file mode 100644 index e8f83a7f5f9..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/RandomDynamicPageButton.jsx +++ /dev/null @@ -1,24 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import * as React from "react"; -import { PlasmicRandomDynamicPageButton } from "./plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton"; - -function RandomDynamicPageButton(props) { - // Use PlasmicRandomDynamicPageButton to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicRandomDynamicPageButton are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all RandomDynamicPageButtonProps here, but feel free - // to do whatever works for you. - return ; -} - -export default RandomDynamicPageButton; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx deleted file mode 100644 index 9377a0dbf33..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx +++ /dev/null @@ -1,625 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: TQcvW_pSKi3 -import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; -import * as pp from "@plasmicapp/react-web"; -import { - hasVariant, - classNames, - createPlasmicElementProxy, - useTrigger, - deriveRenderOpts -} from "@plasmicapp/react-web"; -import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicButton.module.css"; // plasmic-import: TQcvW_pSKi3/css -import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon -import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon - -export const PlasmicButton__VariantProps = new Array( - "showStartIcon", - "showEndIcon", - "isDisabled", - "shape", - "size", - "color" -); - -export const PlasmicButton__ArgProps = new Array( - "children", - "startIcon", - "endIcon", - "link" -); - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicButton__RenderFunc(props) { - const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - const stateSpecs = React.useMemo( - () => [ - { - path: "showStartIcon", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showStartIcon - : undefined - }, - { - path: "showEndIcon", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showEndIcon - : undefined - }, - { - path: "isDisabled", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.isDisabled - : undefined - }, - { - path: "shape", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.shape - : undefined - }, - { - path: "size", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.size - : undefined - }, - { - path: "color", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.color - : undefined - } - ], - - [$props, $ctx] - ); - - const $state = p.useDollarState(stateSpecs, { $props, $ctx, $queries }); - const [isRootFocusVisibleWithin, triggerRootFocusVisibleWithinProps] = - useTrigger("useFocusVisibleWithin", { - isTextInput: false - }); - const triggers = { - focusVisibleWithin_root: isRootFocusVisibleWithin - }; - return ( - - {(hasVariant($state, "showStartIcon", "showStartIcon") ? true : false) ? ( -
- {p.renderPlasmicSlot({ - defaultContents: ( - - ), - - value: args.startIcon, - className: classNames(sty.slotTargetStartIcon, { - [sty.slotTargetStartIconcolor_blue]: hasVariant( - $state, - "color", - "blue" - ), - - [sty.slotTargetStartIconcolor_clear]: hasVariant( - $state, - "color", - "clear" - ), - - [sty.slotTargetStartIconcolor_link]: hasVariant( - $state, - "color", - "link" - ), - - [sty.slotTargetStartIconcolor_softBlue]: hasVariant( - $state, - "color", - "softBlue" - ), - - [sty.slotTargetStartIconcolor_softGreen]: hasVariant( - $state, - "color", - "softGreen" - ), - - [sty.slotTargetStartIconcolor_softRed]: hasVariant( - $state, - "color", - "softRed" - ), - - [sty.slotTargetStartIconcolor_softSand]: hasVariant( - $state, - "color", - "softSand" - ), - - [sty.slotTargetStartIconcolor_softYellow]: hasVariant( - $state, - "color", - "softYellow" - ), - - [sty.slotTargetStartIconcolor_white]: hasVariant( - $state, - "color", - "white" - ), - - [sty.slotTargetStartIconcolor_yellow]: hasVariant( - $state, - "color", - "yellow" - ), - - [sty.slotTargetStartIconshowStartIcon]: hasVariant( - $state, - "showStartIcon", - "showStartIcon" - ) - }) - })} -
- ) : null} - -
- {p.renderPlasmicSlot({ - defaultContents: "Button", - value: args.children, - className: classNames(sty.slotTargetChildren, { - [sty.slotTargetChildren___focusVisibleWithin]: - triggers.focusVisibleWithin_root, - [sty.slotTargetChildrencolor_blue]: hasVariant( - $state, - "color", - "blue" - ), - - [sty.slotTargetChildrencolor_clear]: hasVariant( - $state, - "color", - "clear" - ), - - [sty.slotTargetChildrencolor_green]: hasVariant( - $state, - "color", - "green" - ), - - [sty.slotTargetChildrencolor_link]: hasVariant( - $state, - "color", - "link" - ), - - [sty.slotTargetChildrencolor_link_size_minimal]: - hasVariant($state, "color", "link") && - hasVariant($state, "size", "minimal"), - [sty.slotTargetChildrencolor_red]: hasVariant( - $state, - "color", - "red" - ), - - [sty.slotTargetChildrencolor_sand]: hasVariant( - $state, - "color", - "sand" - ), - - [sty.slotTargetChildrencolor_softBlue]: hasVariant( - $state, - "color", - "softBlue" - ), - - [sty.slotTargetChildrencolor_softGreen]: hasVariant( - $state, - "color", - "softGreen" - ), - - [sty.slotTargetChildrencolor_softRed]: hasVariant( - $state, - "color", - "softRed" - ), - - [sty.slotTargetChildrencolor_softSand]: hasVariant( - $state, - "color", - "softSand" - ), - - [sty.slotTargetChildrencolor_softYellow]: hasVariant( - $state, - "color", - "softYellow" - ), - - [sty.slotTargetChildrencolor_white]: hasVariant( - $state, - "color", - "white" - ), - - [sty.slotTargetChildrencolor_yellow]: hasVariant( - $state, - "color", - "yellow" - ), - - [sty.slotTargetChildrenisDisabled]: hasVariant( - $state, - "isDisabled", - "isDisabled" - ), - - [sty.slotTargetChildrenshape_rounded]: hasVariant( - $state, - "shape", - "rounded" - ), - - [sty.slotTargetChildrenshowEndIcon]: hasVariant( - $state, - "showEndIcon", - "showEndIcon" - ), - - [sty.slotTargetChildrenshowStartIcon]: hasVariant( - $state, - "showStartIcon", - "showStartIcon" - ), - - [sty.slotTargetChildrensize_minimal]: hasVariant( - $state, - "size", - "minimal" - ) - }) - })} -
- - {(hasVariant($state, "showEndIcon", "showEndIcon") ? true : false) ? ( -
- {p.renderPlasmicSlot({ - defaultContents: ( - - ), - - value: args.endIcon, - className: classNames(sty.slotTargetEndIcon, { - [sty.slotTargetEndIconcolor_clear]: hasVariant( - $state, - "color", - "clear" - ), - - [sty.slotTargetEndIconcolor_link]: hasVariant( - $state, - "color", - "link" - ), - - [sty.slotTargetEndIconcolor_softBlue]: hasVariant( - $state, - "color", - "softBlue" - ), - - [sty.slotTargetEndIconcolor_softGreen]: hasVariant( - $state, - "color", - "softGreen" - ), - - [sty.slotTargetEndIconcolor_softRed]: hasVariant( - $state, - "color", - "softRed" - ), - - [sty.slotTargetEndIconcolor_softSand]: hasVariant( - $state, - "color", - "softSand" - ), - - [sty.slotTargetEndIconcolor_softYellow]: hasVariant( - $state, - "color", - "softYellow" - ), - - [sty.slotTargetEndIconcolor_white]: hasVariant( - $state, - "color", - "white" - ), - - [sty.slotTargetEndIconcolor_yellow]: hasVariant( - $state, - "color", - "yellow" - ), - - [sty.slotTargetEndIconshowEndIcon]: hasVariant( - $state, - "showEndIcon", - "showEndIcon" - ) - }) - })} -
- ) : null} -
- ); -} - -function useBehavior(props, ref) { - const b = pp.useButton( - PlasmicButton, - props, - { - showStartIconVariant: { - group: "showStartIcon", - variant: "showStartIcon" - }, - showEndIconVariant: { group: "showEndIcon", variant: "showEndIcon" }, - isDisabledVariant: { group: "isDisabled", variant: "isDisabled" }, - contentSlot: "children", - startIconSlot: "startIcon", - endIconSlot: "endIcon", - root: "root" - }, - ref - ); - - return b; -} - -const PlasmicDescendants = { - root: ["root", "startIconContainer", "contentContainer", "endIconContainer"], - startIconContainer: ["startIconContainer"], - contentContainer: ["contentContainer"], - endIconContainer: ["endIconContainer"] -}; - -function makeNodeComponent(nodeName) { - const func = function (props) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicButton__ArgProps, - internalVariantPropNames: PlasmicButton__VariantProps - }), - [props, nodeName] - ); - - return PlasmicButton__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicButton"; - } else { - func.displayName = `PlasmicButton.${nodeName}`; - } - return func; -} - -export const PlasmicButton = Object.assign( - // Top-level PlasmicButton renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - startIconContainer: makeNodeComponent("startIconContainer"), - contentContainer: makeNodeComponent("contentContainer"), - endIconContainer: makeNodeComponent("endIconContainer"), - // Metadata about props expected for PlasmicButton - internalVariantProps: PlasmicButton__VariantProps, - internalArgProps: PlasmicButton__ArgProps, - useBehavior - } -); - -export default PlasmicButton; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx deleted file mode 100644 index 717692e251b..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx +++ /dev/null @@ -1,166 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: AO44A-w7hh -import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; -import { - classNames, - createPlasmicElementProxy, - deriveRenderOpts -} from "@plasmicapp/react-web"; -import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component -import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css - -export const PlasmicDynamicPage__VariantProps = new Array(); - -export const PlasmicDynamicPage__ArgProps = new Array(); - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicDynamicPage__RenderFunc(props) { - const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - return ( - -
-
- -

- {(() => { - try { - return $ctx.params.slug; - } catch (e) { - if (e instanceof TypeError) { - return "Page 1"; - } - throw e; - } - })()} -

- - -
-
-
-
- ); -} - -const PlasmicDescendants = { - root: ["root", "section", "h1", "randomDynamicPageButton"], - section: ["section", "h1", "randomDynamicPageButton"], - h1: ["h1"], - randomDynamicPageButton: ["randomDynamicPageButton"] -}; - -function makeNodeComponent(nodeName) { - const func = function (props) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicDynamicPage__ArgProps, - internalVariantPropNames: PlasmicDynamicPage__VariantProps - }), - [props, nodeName] - ); - - return PlasmicDynamicPage__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicDynamicPage"; - } else { - func.displayName = `PlasmicDynamicPage.${nodeName}`; - } - return func; -} - -export const PlasmicDynamicPage = Object.assign( - // Top-level PlasmicDynamicPage renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - section: makeNodeComponent("section"), - h1: makeNodeComponent("h1"), - randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"), - // Metadata about props expected for PlasmicDynamicPage - internalVariantProps: PlasmicDynamicPage__VariantProps, - internalArgProps: PlasmicDynamicPage__ArgProps, - // Page metadata - pageMetadata: { - title: "", - description: "", - ogImageSrc: "", - canonical: "" - } - } -); - -export default PlasmicDynamicPage; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx deleted file mode 100644 index 4f6f0569160..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx +++ /dev/null @@ -1,29 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -import * as React from "react"; -import * as p from "@plasmicapp/react-web"; - -export const ScreenContext = React.createContext( - "PLEASE_RENDER_INSIDE_PROVIDER" -); -/** - * @deprecated Plasmic now uses a custom hook for Screen variants, which is - * automatically included in your components. Please remove this provider - * from your code. - */ - -export function ScreenVariantProvider(props) { - console.warn( - "DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code." - ); - return props.children; -} - -export const useScreenVariants = p.createUseScreenVariants(true, { - desktopOnly: "(min-width:768px)", -}); - -export default ScreenContext; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx deleted file mode 100644 index c86ab9d90b1..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx +++ /dev/null @@ -1,210 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: 6uuAAE1jiCew -import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; -import { - hasVariant, - classNames, - createPlasmicElementProxy, - deriveRenderOpts, - ensureGlobalVariants -} from "@plasmicapp/react-web"; -import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component -import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant -import "@plasmicapp/react-web/lib/plasmic.css"; -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css - -export const PlasmicHomepage__VariantProps = new Array(); - -export const PlasmicHomepage__ArgProps = new Array(); - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicHomepage__RenderFunc(props) { - const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - const globalVariants = ensureGlobalVariants({ - screen: useScreenVariantsscBjPxgdxdzbv() - }); - return ( - -
-
- -

- {"create-plasmic-app"} -

- -
- {hasVariant(globalVariants, "screen", "desktopOnly") ? ( - - - { - "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\nrun-cpa.ts runs create-plasmic-app for many combinations of args (e.g. nextjs + appDir + loader + typescript) to check for changes in generated files. Any changes to this project will result in lots of changes to the generated files. " - } - - - {"Therefore, please avoid changing this project."} - - - ) : ( - - - { - "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template—do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase—press the " - } - - - {"Code"} - - - { - " button in the top right and follow the quickstart instructions.\n\nJoin our Slack community (icon in bottom left) for help any time." - } - - - )} -
- - -
-
-
-
- ); -} - -const PlasmicDescendants = { - root: ["root", "section", "h1", "text", "randomDynamicPageButton"], - section: ["section", "h1", "text", "randomDynamicPageButton"], - h1: ["h1"], - text: ["text"], - randomDynamicPageButton: ["randomDynamicPageButton"] -}; - -function makeNodeComponent(nodeName) { - const func = function (props) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicHomepage__ArgProps, - internalVariantPropNames: PlasmicHomepage__VariantProps - }), - [props, nodeName] - ); - - return PlasmicHomepage__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicHomepage"; - } else { - func.displayName = `PlasmicHomepage.${nodeName}`; - } - return func; -} - -export const PlasmicHomepage = Object.assign( - // Top-level PlasmicHomepage renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - section: makeNodeComponent("section"), - h1: makeNodeComponent("h1"), - text: makeNodeComponent("text"), - randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"), - // Metadata about props expected for PlasmicHomepage - internalVariantProps: PlasmicHomepage__VariantProps, - internalArgProps: PlasmicHomepage__ArgProps, - // Page metadata - pageMetadata: { - title: "", - description: "", - ogImageSrc: "", - canonical: "" - } - } -); - -export default PlasmicHomepage; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx deleted file mode 100644 index e96c8c03551..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.jsx +++ /dev/null @@ -1,161 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: Q23H1_1M_P -import * as React from "react"; -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; -import { - classNames, - createPlasmicElementProxy, - deriveRenderOpts -} from "@plasmicapp/react-web"; -import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component -import "@plasmicapp/react-web/lib/plasmic.css"; -import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css - -export const PlasmicRandomDynamicPageButton__VariantProps = new Array(); - -export const PlasmicRandomDynamicPageButton__ArgProps = new Array(); - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); - -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicRandomDynamicPageButton__RenderFunc(props) { - const { variants, overrides, forNode } = props; - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - return ( - - ); -} - -const PlasmicDescendants = { - root: ["root"] -}; - -function makeNodeComponent(nodeName) { - const func = function (props) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps, - internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps - }), - [props, nodeName] - ); - - return PlasmicRandomDynamicPageButton__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicRandomDynamicPageButton"; - } else { - func.displayName = `PlasmicRandomDynamicPageButton.${nodeName}`; - } - return func; -} - -export const PlasmicRandomDynamicPageButton = Object.assign( - // Top-level PlasmicRandomDynamicPageButton renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - // Metadata about props expected for PlasmicRandomDynamicPageButton - internalVariantProps: PlasmicRandomDynamicPageButton__VariantProps, - internalArgProps: PlasmicRandomDynamicPageButton__ArgProps - } -); - -export default PlasmicRandomDynamicPageButton; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx deleted file mode 100644 index f79d6f56e48..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx +++ /dev/null @@ -1,39 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -import React from "react"; -import { classNames } from "@plasmicapp/react-web"; - -export function ChecksvgIcon(props) { - const { className, style, title, ...restProps } = props; - return ( - - {title && {title}} - - - - ); -} - -export default ChecksvgIcon; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx b/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx deleted file mode 100644 index 245f578f1eb..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.jsx +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -import React from "react"; -import { classNames } from "@plasmicapp/react-web"; - -export function IconIcon(props) { - const { className, style, title, ...restProps } = props; - return ( - - {title && {title}} - - - - ); -} - -export default IconIcon; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/index.js b/packages/create-plasmic-app/cpa-out/react-loader-js/src/index.js deleted file mode 100644 index 0509330858b..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/reportWebVitals.js b/packages/create-plasmic-app/cpa-out/react-loader-js/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad9e6..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-js/src/setupTests.js b/packages/create-plasmic-app/cpa-out/react-loader-js/src/setupTests.js deleted file mode 100644 index 8f2609b7b3e..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-js/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/package.json b/packages/create-plasmic-app/cpa-out/react-loader-ts/package.json deleted file mode 100644 index a2492d29065..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/package.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "name": "react-loader-ts", - "version": "0.1.0", - "private": true, - "dependencies": { - "@plasmicapp/cli": "^0.1.231", - "@plasmicapp/react-web": "^0.2.174", - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^13.0.0", - "@testing-library/user-event": "^13.2.1", - "@types/jest": "^27.0.1", - "@types/node": "^16.7.13", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-scripts": "5.0.1", - "typescript": "^4.4.2", - "web-vitals": "^2.1.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/plasmic.json b/packages/create-plasmic-app/cpa-out/react-loader-ts/plasmic.json deleted file mode 100644 index 28147da3423..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/plasmic.json +++ /dev/null @@ -1,127 +0,0 @@ -{ - "platform": "react", - "code": { - "lang": "ts", - "scheme": "blackbox", - "reactRuntime": "classic" - }, - "style": { - "scheme": "css-modules", - "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css" - }, - "images": { - "scheme": "files", - "publicDir": "../../public", - "publicUrlPrefix": "/static/" - }, - "tokens": { - "scheme": "theo", - "tokensFilePath": "plasmic-tokens.theo.json" - }, - "srcDir": "src/components", - "defaultPlasmicDir": "./plasmic", - "projects": [ - { - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ", - "projectName": "create-plasmic-app", - "version": "latest", - "cssFilePath": "plasmic/create_plasmic_app/plasmic_create_plasmic_app.module.css", - "components": [ - { - "id": "6uuAAE1jiCew", - "name": "Homepage", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.tsx", - "importSpec": { - "modulePath": "Homepage.tsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css", - "scheme": "blackbox", - "componentType": "page" - }, - { - "id": "AO44A-w7hh", - "name": "DynamicPage", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.tsx", - "importSpec": { - "modulePath": "DynamicPage.tsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css", - "scheme": "blackbox", - "componentType": "page" - }, - { - "id": "TQcvW_pSKi3", - "name": "Button", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicButton.tsx", - "importSpec": { - "modulePath": "Button.tsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicButton.module.css", - "scheme": "blackbox", - "componentType": "component", - "plumeType": "button" - }, - { - "id": "Q23H1_1M_P", - "name": "RandomDynamicPageButton", - "type": "managed", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx", - "importSpec": { - "modulePath": "RandomDynamicPageButton.tsx" - }, - "cssFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.module.css", - "scheme": "blackbox", - "componentType": "component" - } - ], - "icons": [ - { - "id": "gj-_D7n31Ho", - "name": "ChecksvgIcon", - "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx" - }, - { - "id": "6PNxx3YMyDQ", - "name": "IconIcon", - "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx" - } - ], - "images": [], - "indirect": false, - "globalContextsFilePath": "", - "codeComponents": [ - { - "id": "P6aGdYWZ2R", - "name": "PlasmicHead", - "componentImportPath": "@plasmicapp/react-web" - }, - { - "id": "8G2A-uTjGa", - "name": "Fetcher", - "componentImportPath": "@plasmicapp/react-web/lib/data-sources" - } - ] - } - ], - "globalVariants": { - "variantGroups": [ - { - "id": "SCBjPXGDXDZBV", - "name": "Screen", - "projectId": "47tFXWjN2C4NyHFGGpaYQ3", - "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx" - } - ] - }, - "wrapPagesWithGlobalContexts": true, - "cliVersion": "0.1.231", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.231/dist/plasmic.schema.json" -} diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/App.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/App.tsx deleted file mode 100644 index 0dc75aae1be..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/App.tsx +++ /dev/null @@ -1,9 +0,0 @@ - -import Homepage from './components/Homepage'; - -function App() { - return (); -} - -export default App; - \ No newline at end of file diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/Button.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/Button.tsx deleted file mode 100644 index 34bcc1b8e60..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/Button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from "react"; -import { - PlasmicButton, - DefaultButtonProps -} from "./plasmic/create_plasmic_app/PlasmicButton"; -import { - ButtonRef, - HtmlAnchorOnlyProps, - HtmlButtonOnlyProps -} from "@plasmicapp/react-web"; - -interface ButtonProps extends DefaultButtonProps { - // Feel free to add any additional props that this component should receive -} -function Button_(props: ButtonProps, ref: ButtonRef) { - const { plasmicProps } = PlasmicButton.useBehavior(props, ref); - return ; -} - -type ButtonComponentType = { - ( - props: Omit & { - ref?: React.Ref; - } - ): React.ReactElement; - ( - props: Omit & { - ref?: React.Ref; - } - ): React.ReactElement; -}; -const Button = React.forwardRef(Button_) as any as ButtonComponentType; - -export default Object.assign(Button, { - __plumeType: "button" -}); diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/DynamicPage.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/DynamicPage.tsx deleted file mode 100644 index 6dd4355b797..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/DynamicPage.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import * as React from "react"; -import { - PlasmicDynamicPage, - DefaultDynamicPageProps -} from "./plasmic/create_plasmic_app/PlasmicDynamicPage"; -import { HTMLElementRefOf } from "@plasmicapp/react-web"; - -// Your component props start with props for variants and slots you defined -// in Plasmic, but you can add more here, like event handlers that you can -// attach to named nodes in your component. -// -// If you don't want to expose certain variants or slots as a prop, you can use -// Omit to hide them: -// -// interface DynamicPageProps extends Omit { -// // etc. -// } -// -// You can also stop extending from DefaultDynamicPageProps altogether and have -// total control over the props for your component. -export interface DynamicPageProps extends DefaultDynamicPageProps {} - -function DynamicPage_(props: DynamicPageProps, ref: HTMLElementRefOf<"div">) { - // Use PlasmicDynamicPage to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicDynamicPage are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all DynamicPageProps here, but feel free - // to do whatever works for you. - - return ; -} - -const DynamicPage = React.forwardRef(DynamicPage_); -export default DynamicPage; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/Homepage.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/Homepage.tsx deleted file mode 100644 index a205d7c7b6f..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/Homepage.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import * as React from "react"; -import { - PlasmicHomepage, - DefaultHomepageProps -} from "./plasmic/create_plasmic_app/PlasmicHomepage"; -import { HTMLElementRefOf } from "@plasmicapp/react-web"; - -// Your component props start with props for variants and slots you defined -// in Plasmic, but you can add more here, like event handlers that you can -// attach to named nodes in your component. -// -// If you don't want to expose certain variants or slots as a prop, you can use -// Omit to hide them: -// -// interface HomepageProps extends Omit { -// // etc. -// } -// -// You can also stop extending from DefaultHomepageProps altogether and have -// total control over the props for your component. -export interface HomepageProps extends DefaultHomepageProps {} - -function Homepage_(props: HomepageProps, ref: HTMLElementRefOf<"div">) { - // Use PlasmicHomepage to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicHomepage are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all HomepageProps here, but feel free - // to do whatever works for you. - - return ; -} - -const Homepage = React.forwardRef(Homepage_); -export default Homepage; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/RandomDynamicPageButton.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/RandomDynamicPageButton.tsx deleted file mode 100644 index 7bb41e78a22..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/RandomDynamicPageButton.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import * as React from "react"; -import { - PlasmicRandomDynamicPageButton, - DefaultRandomDynamicPageButtonProps -} from "./plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton"; - -// Your component props start with props for variants and slots you defined -// in Plasmic, but you can add more here, like event handlers that you can -// attach to named nodes in your component. -// -// If you don't want to expose certain variants or slots as a prop, you can use -// Omit to hide them: -// -// interface RandomDynamicPageButtonProps extends Omit { -// // etc. -// } -// -// You can also stop extending from DefaultRandomDynamicPageButtonProps altogether and have -// total control over the props for your component. -export interface RandomDynamicPageButtonProps - extends DefaultRandomDynamicPageButtonProps {} - -function RandomDynamicPageButton(props: RandomDynamicPageButtonProps) { - // Use PlasmicRandomDynamicPageButton to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicRandomDynamicPageButton are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all RandomDynamicPageButtonProps here, but feel free - // to do whatever works for you. - - return ; -} - -export default RandomDynamicPageButton; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx deleted file mode 100644 index fc1a5937570..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx +++ /dev/null @@ -1,725 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ - -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ - -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: TQcvW_pSKi3 - -import * as React from "react"; - -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - -import * as pp from "@plasmicapp/react-web"; -import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, - MultiChoiceArg, - SingleBooleanChoiceArg, - SingleChoiceArg, - pick, - omit, - useTrigger, - StrictProps, - deriveRenderOpts, - ensureGlobalVariants -} from "@plasmicapp/react-web"; - -import "@plasmicapp/react-web/lib/plasmic.css"; - -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicButton.module.css"; // plasmic-import: TQcvW_pSKi3/css - -import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon -import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon - -export type PlasmicButton__VariantMembers = { - showStartIcon: "showStartIcon"; - showEndIcon: "showEndIcon"; - isDisabled: "isDisabled"; - shape: "rounded" | "round" | "sharp"; - size: "compact" | "minimal"; - color: - | "blue" - | "green" - | "yellow" - | "red" - | "sand" - | "white" - | "softBlue" - | "softGreen" - | "softYellow" - | "softRed" - | "softSand" - | "clear" - | "link"; -}; -export type PlasmicButton__VariantsArgs = { - showStartIcon?: SingleBooleanChoiceArg<"showStartIcon">; - showEndIcon?: SingleBooleanChoiceArg<"showEndIcon">; - isDisabled?: SingleBooleanChoiceArg<"isDisabled">; - shape?: SingleChoiceArg<"rounded" | "round" | "sharp">; - size?: SingleChoiceArg<"compact" | "minimal">; - color?: SingleChoiceArg< - | "blue" - | "green" - | "yellow" - | "red" - | "sand" - | "white" - | "softBlue" - | "softGreen" - | "softYellow" - | "softRed" - | "softSand" - | "clear" - | "link" - >; -}; -type VariantPropType = keyof PlasmicButton__VariantsArgs; -export const PlasmicButton__VariantProps = new Array( - "showStartIcon", - "showEndIcon", - "isDisabled", - "shape", - "size", - "color" -); - -export type PlasmicButton__ArgsType = { - children?: React.ReactNode; - startIcon?: React.ReactNode; - endIcon?: React.ReactNode; - link?: string; -}; -type ArgPropType = keyof PlasmicButton__ArgsType; -export const PlasmicButton__ArgProps = new Array( - "children", - "startIcon", - "endIcon", - "link" -); - -export type PlasmicButton__OverridesType = { - root?: p.Flex<"button">; - startIconContainer?: p.Flex<"div">; - contentContainer?: p.Flex<"div">; - endIconContainer?: p.Flex<"div">; -}; - -export interface DefaultButtonProps extends pp.BaseButtonProps { - shape?: SingleChoiceArg<"rounded" | "round" | "sharp">; - size?: SingleChoiceArg<"compact" | "minimal">; - color?: SingleChoiceArg< - | "blue" - | "green" - | "yellow" - | "red" - | "sand" - | "white" - | "softBlue" - | "softGreen" - | "softYellow" - | "softRed" - | "softSand" - | "clear" - | "link" - >; -} - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicButton__RenderFunc(props: { - variants: PlasmicButton__VariantsArgs; - args: PlasmicButton__ArgsType; - overrides: PlasmicButton__OverridesType; - forNode?: string; -}) { - const { variants, overrides, forNode } = props; - - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - const stateSpecs = React.useMemo( - () => [ - { - path: "showStartIcon", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showStartIcon - : undefined - }, - { - path: "showEndIcon", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.showEndIcon - : undefined - }, - { - path: "isDisabled", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.isDisabled - : undefined - }, - { - path: "shape", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.shape - : undefined - }, - { - path: "size", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.size - : undefined - }, - { - path: "color", - type: "private", - variableType: "variant", - initFunc: true - ? ({ $props, $state, $queries, $ctx }) => $props.color - : undefined - } - ], - [$props, $ctx] - ); - const $state = p.useDollarState(stateSpecs, { $props, $ctx, $queries }); - - const [isRootFocusVisibleWithin, triggerRootFocusVisibleWithinProps] = - useTrigger("useFocusVisibleWithin", { - isTextInput: false - }); - const triggers = { - focusVisibleWithin_root: isRootFocusVisibleWithin - }; - - return ( - - {(hasVariant($state, "showStartIcon", "showStartIcon") ? true : false) ? ( -
- {p.renderPlasmicSlot({ - defaultContents: ( - - ), - - value: args.startIcon, - className: classNames(sty.slotTargetStartIcon, { - [sty.slotTargetStartIconcolor_blue]: hasVariant( - $state, - "color", - "blue" - ), - [sty.slotTargetStartIconcolor_clear]: hasVariant( - $state, - "color", - "clear" - ), - [sty.slotTargetStartIconcolor_link]: hasVariant( - $state, - "color", - "link" - ), - [sty.slotTargetStartIconcolor_softBlue]: hasVariant( - $state, - "color", - "softBlue" - ), - [sty.slotTargetStartIconcolor_softGreen]: hasVariant( - $state, - "color", - "softGreen" - ), - [sty.slotTargetStartIconcolor_softRed]: hasVariant( - $state, - "color", - "softRed" - ), - [sty.slotTargetStartIconcolor_softSand]: hasVariant( - $state, - "color", - "softSand" - ), - [sty.slotTargetStartIconcolor_softYellow]: hasVariant( - $state, - "color", - "softYellow" - ), - [sty.slotTargetStartIconcolor_white]: hasVariant( - $state, - "color", - "white" - ), - [sty.slotTargetStartIconcolor_yellow]: hasVariant( - $state, - "color", - "yellow" - ), - [sty.slotTargetStartIconshowStartIcon]: hasVariant( - $state, - "showStartIcon", - "showStartIcon" - ) - }) - })} -
- ) : null} - -
- {p.renderPlasmicSlot({ - defaultContents: "Button", - value: args.children, - className: classNames(sty.slotTargetChildren, { - [sty.slotTargetChildren___focusVisibleWithin]: - triggers.focusVisibleWithin_root, - [sty.slotTargetChildrencolor_blue]: hasVariant( - $state, - "color", - "blue" - ), - [sty.slotTargetChildrencolor_clear]: hasVariant( - $state, - "color", - "clear" - ), - [sty.slotTargetChildrencolor_green]: hasVariant( - $state, - "color", - "green" - ), - [sty.slotTargetChildrencolor_link]: hasVariant( - $state, - "color", - "link" - ), - [sty.slotTargetChildrencolor_link_size_minimal]: - hasVariant($state, "color", "link") && - hasVariant($state, "size", "minimal"), - [sty.slotTargetChildrencolor_red]: hasVariant( - $state, - "color", - "red" - ), - [sty.slotTargetChildrencolor_sand]: hasVariant( - $state, - "color", - "sand" - ), - [sty.slotTargetChildrencolor_softBlue]: hasVariant( - $state, - "color", - "softBlue" - ), - [sty.slotTargetChildrencolor_softGreen]: hasVariant( - $state, - "color", - "softGreen" - ), - [sty.slotTargetChildrencolor_softRed]: hasVariant( - $state, - "color", - "softRed" - ), - [sty.slotTargetChildrencolor_softSand]: hasVariant( - $state, - "color", - "softSand" - ), - [sty.slotTargetChildrencolor_softYellow]: hasVariant( - $state, - "color", - "softYellow" - ), - [sty.slotTargetChildrencolor_white]: hasVariant( - $state, - "color", - "white" - ), - [sty.slotTargetChildrencolor_yellow]: hasVariant( - $state, - "color", - "yellow" - ), - [sty.slotTargetChildrenisDisabled]: hasVariant( - $state, - "isDisabled", - "isDisabled" - ), - [sty.slotTargetChildrenshape_rounded]: hasVariant( - $state, - "shape", - "rounded" - ), - [sty.slotTargetChildrenshowEndIcon]: hasVariant( - $state, - "showEndIcon", - "showEndIcon" - ), - [sty.slotTargetChildrenshowStartIcon]: hasVariant( - $state, - "showStartIcon", - "showStartIcon" - ), - [sty.slotTargetChildrensize_minimal]: hasVariant( - $state, - "size", - "minimal" - ) - }) - })} -
- - {(hasVariant($state, "showEndIcon", "showEndIcon") ? true : false) ? ( -
- {p.renderPlasmicSlot({ - defaultContents: ( - - ), - - value: args.endIcon, - className: classNames(sty.slotTargetEndIcon, { - [sty.slotTargetEndIconcolor_clear]: hasVariant( - $state, - "color", - "clear" - ), - [sty.slotTargetEndIconcolor_link]: hasVariant( - $state, - "color", - "link" - ), - [sty.slotTargetEndIconcolor_softBlue]: hasVariant( - $state, - "color", - "softBlue" - ), - [sty.slotTargetEndIconcolor_softGreen]: hasVariant( - $state, - "color", - "softGreen" - ), - [sty.slotTargetEndIconcolor_softRed]: hasVariant( - $state, - "color", - "softRed" - ), - [sty.slotTargetEndIconcolor_softSand]: hasVariant( - $state, - "color", - "softSand" - ), - [sty.slotTargetEndIconcolor_softYellow]: hasVariant( - $state, - "color", - "softYellow" - ), - [sty.slotTargetEndIconcolor_white]: hasVariant( - $state, - "color", - "white" - ), - [sty.slotTargetEndIconcolor_yellow]: hasVariant( - $state, - "color", - "yellow" - ), - [sty.slotTargetEndIconshowEndIcon]: hasVariant( - $state, - "showEndIcon", - "showEndIcon" - ) - }) - })} -
- ) : null} -
- ) as React.ReactElement | null; -} - -function useBehavior

( - props: P, - ref: pp.ButtonRef -) { - const b = pp.useButton( - PlasmicButton, - props, - { - showStartIconVariant: { - group: "showStartIcon", - variant: "showStartIcon" - }, - showEndIconVariant: { group: "showEndIcon", variant: "showEndIcon" }, - isDisabledVariant: { group: "isDisabled", variant: "isDisabled" }, - contentSlot: "children", - startIconSlot: "startIcon", - endIconSlot: "endIcon", - root: "root" - }, - ref - ); - - return b; -} - -const PlasmicDescendants = { - root: ["root", "startIconContainer", "contentContainer", "endIconContainer"], - startIconContainer: ["startIconContainer"], - contentContainer: ["contentContainer"], - endIconContainer: ["endIconContainer"] -} as const; -type NodeNameType = keyof typeof PlasmicDescendants; -type DescendantsType = - (typeof PlasmicDescendants)[T][number]; -type NodeDefaultElementType = { - root: "button"; - startIconContainer: "div"; - contentContainer: "div"; - endIconContainer: "div"; -}; - -type ReservedPropsType = "variants" | "args" | "overrides"; -type NodeOverridesType = Pick< - PlasmicButton__OverridesType, - DescendantsType ->; -type NodeComponentProps = - // Explicitly specify variants, args, and overrides as objects - { - variants?: PlasmicButton__VariantsArgs; - args?: PlasmicButton__ArgsType; - overrides?: NodeOverridesType; - } & Omit & // Specify variants directly as props - /* Specify args directly as props*/ Omit< - PlasmicButton__ArgsType, - ReservedPropsType - > & - /* Specify overrides for each element directly as props*/ Omit< - NodeOverridesType, - ReservedPropsType | VariantPropType | ArgPropType - > & - /* Specify props for the root element*/ Omit< - Partial>, - ReservedPropsType | VariantPropType | ArgPropType | DescendantsType - >; - -function makeNodeComponent(nodeName: NodeName) { - type PropsType = NodeComponentProps & { key?: React.Key }; - const func = function ( - props: T & StrictProps - ) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicButton__ArgProps, - internalVariantPropNames: PlasmicButton__VariantProps - }), - [props, nodeName] - ); - return PlasmicButton__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicButton"; - } else { - func.displayName = `PlasmicButton.${nodeName}`; - } - return func; -} - -export const PlasmicButton = Object.assign( - // Top-level PlasmicButton renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - startIconContainer: makeNodeComponent("startIconContainer"), - contentContainer: makeNodeComponent("contentContainer"), - endIconContainer: makeNodeComponent("endIconContainer"), - - // Metadata about props expected for PlasmicButton - internalVariantProps: PlasmicButton__VariantProps, - internalArgProps: PlasmicButton__ArgProps, - - useBehavior - } -); - -export default PlasmicButton; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx deleted file mode 100644 index 57b0df30bba..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx +++ /dev/null @@ -1,248 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ - -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ - -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: AO44A-w7hh - -import * as React from "react"; - -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - -import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, - MultiChoiceArg, - SingleBooleanChoiceArg, - SingleChoiceArg, - pick, - omit, - useTrigger, - StrictProps, - deriveRenderOpts, - ensureGlobalVariants -} from "@plasmicapp/react-web"; -import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component - -import "@plasmicapp/react-web/lib/plasmic.css"; - -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css - -export type PlasmicDynamicPage__VariantMembers = {}; -export type PlasmicDynamicPage__VariantsArgs = {}; -type VariantPropType = keyof PlasmicDynamicPage__VariantsArgs; -export const PlasmicDynamicPage__VariantProps = new Array(); - -export type PlasmicDynamicPage__ArgsType = {}; -type ArgPropType = keyof PlasmicDynamicPage__ArgsType; -export const PlasmicDynamicPage__ArgProps = new Array(); - -export type PlasmicDynamicPage__OverridesType = { - root?: p.Flex<"div">; - section?: p.Flex<"section">; - h1?: p.Flex<"h1">; - randomDynamicPageButton?: p.Flex; -}; - -export interface DefaultDynamicPageProps { - className?: string; -} - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicDynamicPage__RenderFunc(props: { - variants: PlasmicDynamicPage__VariantsArgs; - args: PlasmicDynamicPage__ArgsType; - overrides: PlasmicDynamicPage__OverridesType; - forNode?: string; -}) { - const { variants, overrides, forNode } = props; - - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - - return ( - - {} - -

-
- -

- {(() => { - try { - return $ctx.params.slug; - } catch (e) { - if (e instanceof TypeError) { - return "Page 1"; - } - throw e; - } - })()} -

- - -
-
-
- - ) as React.ReactElement | null; -} - -const PlasmicDescendants = { - root: ["root", "section", "h1", "randomDynamicPageButton"], - section: ["section", "h1", "randomDynamicPageButton"], - h1: ["h1"], - randomDynamicPageButton: ["randomDynamicPageButton"] -} as const; -type NodeNameType = keyof typeof PlasmicDescendants; -type DescendantsType = - (typeof PlasmicDescendants)[T][number]; -type NodeDefaultElementType = { - root: "div"; - section: "section"; - h1: "h1"; - randomDynamicPageButton: typeof RandomDynamicPageButton; -}; - -type ReservedPropsType = "variants" | "args" | "overrides"; -type NodeOverridesType = Pick< - PlasmicDynamicPage__OverridesType, - DescendantsType ->; -type NodeComponentProps = - // Explicitly specify variants, args, and overrides as objects - { - variants?: PlasmicDynamicPage__VariantsArgs; - args?: PlasmicDynamicPage__ArgsType; - overrides?: NodeOverridesType; - } & Omit & // Specify variants directly as props - /* Specify args directly as props*/ Omit< - PlasmicDynamicPage__ArgsType, - ReservedPropsType - > & - /* Specify overrides for each element directly as props*/ Omit< - NodeOverridesType, - ReservedPropsType | VariantPropType | ArgPropType - > & - /* Specify props for the root element*/ Omit< - Partial>, - ReservedPropsType | VariantPropType | ArgPropType | DescendantsType - >; - -function makeNodeComponent(nodeName: NodeName) { - type PropsType = NodeComponentProps & { key?: React.Key }; - const func = function ( - props: T & StrictProps - ) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicDynamicPage__ArgProps, - internalVariantPropNames: PlasmicDynamicPage__VariantProps - }), - [props, nodeName] - ); - return PlasmicDynamicPage__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicDynamicPage"; - } else { - func.displayName = `PlasmicDynamicPage.${nodeName}`; - } - return func; -} - -export const PlasmicDynamicPage = Object.assign( - // Top-level PlasmicDynamicPage renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - section: makeNodeComponent("section"), - h1: makeNodeComponent("h1"), - randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"), - - // Metadata about props expected for PlasmicDynamicPage - internalVariantProps: PlasmicDynamicPage__VariantProps, - internalArgProps: PlasmicDynamicPage__ArgProps, - - // Page metadata - pageMetadata: { - title: "", - description: "", - ogImageSrc: "", - canonical: "" - } - } -); - -export default PlasmicDynamicPage; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx deleted file mode 100644 index f97963f0ca5..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx +++ /dev/null @@ -1,31 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ - -import * as React from "react"; -import * as p from "@plasmicapp/react-web"; - -export type ScreenValue = "desktopOnly"; -export const ScreenContext = React.createContext( - "PLEASE_RENDER_INSIDE_PROVIDER" as any -); - -/** - * @deprecated Plasmic now uses a custom hook for Screen variants, which is - * automatically included in your components. Please remove this provider - * from your code. - */ -export function ScreenVariantProvider(props: React.PropsWithChildren) { - console.warn( - "DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code." - ); - return props.children; -} - -export const useScreenVariants = p.createUseScreenVariants(true, { - desktopOnly: "(min-width:768px)", -}); - -export default ScreenContext; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx deleted file mode 100644 index 8e3d8cf6262..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx +++ /dev/null @@ -1,294 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ - -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ - -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: 6uuAAE1jiCew - -import * as React from "react"; - -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - -import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, - MultiChoiceArg, - SingleBooleanChoiceArg, - SingleChoiceArg, - pick, - omit, - useTrigger, - StrictProps, - deriveRenderOpts, - ensureGlobalVariants -} from "@plasmicapp/react-web"; -import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component - -import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant - -import "@plasmicapp/react-web/lib/plasmic.css"; - -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css - -export type PlasmicHomepage__VariantMembers = {}; -export type PlasmicHomepage__VariantsArgs = {}; -type VariantPropType = keyof PlasmicHomepage__VariantsArgs; -export const PlasmicHomepage__VariantProps = new Array(); - -export type PlasmicHomepage__ArgsType = {}; -type ArgPropType = keyof PlasmicHomepage__ArgsType; -export const PlasmicHomepage__ArgProps = new Array(); - -export type PlasmicHomepage__OverridesType = { - root?: p.Flex<"div">; - section?: p.Flex<"section">; - h1?: p.Flex<"h1">; - text?: p.Flex<"div">; - randomDynamicPageButton?: p.Flex; -}; - -export interface DefaultHomepageProps { - className?: string; -} - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicHomepage__RenderFunc(props: { - variants: PlasmicHomepage__VariantsArgs; - args: PlasmicHomepage__ArgsType; - overrides: PlasmicHomepage__OverridesType; - forNode?: string; -}) { - const { variants, overrides, forNode } = props; - - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - - const globalVariants = ensureGlobalVariants({ - screen: useScreenVariantsscBjPxgdxdzbv() - }); - - return ( - - {} - -
-
- -

- {"create-plasmic-app"} -

- -
- {hasVariant(globalVariants, "screen", "desktopOnly") ? ( - - - { - "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\nrun-cpa.ts runs create-plasmic-app for many combinations of args (e.g. nextjs + appDir + loader + typescript) to check for changes in generated files. Any changes to this project will result in lots of changes to the generated files. " - } - - - {"Therefore, please avoid changing this project."} - - - ) : ( - - - { - "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template—do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase—press the " - } - - - {"Code"} - - - { - " button in the top right and follow the quickstart instructions.\n\nJoin our Slack community (icon in bottom left) for help any time." - } - - - )} -
- - -
-
-
-
- ) as React.ReactElement | null; -} - -const PlasmicDescendants = { - root: ["root", "section", "h1", "text", "randomDynamicPageButton"], - section: ["section", "h1", "text", "randomDynamicPageButton"], - h1: ["h1"], - text: ["text"], - randomDynamicPageButton: ["randomDynamicPageButton"] -} as const; -type NodeNameType = keyof typeof PlasmicDescendants; -type DescendantsType = - (typeof PlasmicDescendants)[T][number]; -type NodeDefaultElementType = { - root: "div"; - section: "section"; - h1: "h1"; - text: "div"; - randomDynamicPageButton: typeof RandomDynamicPageButton; -}; - -type ReservedPropsType = "variants" | "args" | "overrides"; -type NodeOverridesType = Pick< - PlasmicHomepage__OverridesType, - DescendantsType ->; -type NodeComponentProps = - // Explicitly specify variants, args, and overrides as objects - { - variants?: PlasmicHomepage__VariantsArgs; - args?: PlasmicHomepage__ArgsType; - overrides?: NodeOverridesType; - } & Omit & // Specify variants directly as props - /* Specify args directly as props*/ Omit< - PlasmicHomepage__ArgsType, - ReservedPropsType - > & - /* Specify overrides for each element directly as props*/ Omit< - NodeOverridesType, - ReservedPropsType | VariantPropType | ArgPropType - > & - /* Specify props for the root element*/ Omit< - Partial>, - ReservedPropsType | VariantPropType | ArgPropType | DescendantsType - >; - -function makeNodeComponent(nodeName: NodeName) { - type PropsType = NodeComponentProps & { key?: React.Key }; - const func = function ( - props: T & StrictProps - ) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicHomepage__ArgProps, - internalVariantPropNames: PlasmicHomepage__VariantProps - }), - [props, nodeName] - ); - return PlasmicHomepage__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicHomepage"; - } else { - func.displayName = `PlasmicHomepage.${nodeName}`; - } - return func; -} - -export const PlasmicHomepage = Object.assign( - // Top-level PlasmicHomepage renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - section: makeNodeComponent("section"), - h1: makeNodeComponent("h1"), - text: makeNodeComponent("text"), - randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"), - - // Metadata about props expected for PlasmicHomepage - internalVariantProps: PlasmicHomepage__VariantProps, - internalArgProps: PlasmicHomepage__ArgProps, - - // Page metadata - pageMetadata: { - title: "", - description: "", - ogImageSrc: "", - canonical: "" - } - } -); - -export default PlasmicHomepage; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx deleted file mode 100644 index 0f34f578fe5..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx +++ /dev/null @@ -1,240 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ - -/** @jsxRuntime classic */ -/** @jsx createPlasmicElementProxy */ -/** @jsxFrag React.Fragment */ - -// This class is auto-generated by Plasmic; please do not edit! -// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3 -// Component: Q23H1_1M_P - -import * as React from "react"; - -import * as p from "@plasmicapp/react-web"; -import * as ph from "@plasmicapp/react-web/lib/host"; - -import { - hasVariant, - classNames, - wrapWithClassName, - createPlasmicElementProxy, - makeFragment, - MultiChoiceArg, - SingleBooleanChoiceArg, - SingleChoiceArg, - pick, - omit, - useTrigger, - StrictProps, - deriveRenderOpts, - ensureGlobalVariants -} from "@plasmicapp/react-web"; -import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component - -import "@plasmicapp/react-web/lib/plasmic.css"; - -import projectcss from "./plasmic_create_plasmic_app.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss -import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css - -import ChecksvgIcon from "./icons/PlasmicIcon__Checksvg"; // plasmic-import: gj-_D7n31Ho/icon -import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon - -export type PlasmicRandomDynamicPageButton__VariantMembers = {}; -export type PlasmicRandomDynamicPageButton__VariantsArgs = {}; -type VariantPropType = keyof PlasmicRandomDynamicPageButton__VariantsArgs; -export const PlasmicRandomDynamicPageButton__VariantProps = - new Array(); - -export type PlasmicRandomDynamicPageButton__ArgsType = {}; -type ArgPropType = keyof PlasmicRandomDynamicPageButton__ArgsType; -export const PlasmicRandomDynamicPageButton__ArgProps = - new Array(); - -export type PlasmicRandomDynamicPageButton__OverridesType = { - root?: p.Flex; -}; - -export interface DefaultRandomDynamicPageButtonProps { - className?: string; -} - -const __wrapUserFunction = - globalThis.__PlasmicWrapUserFunction ?? ((loc, fn) => fn()); -const __wrapUserPromise = - globalThis.__PlasmicWrapUserPromise ?? - (async (loc, promise) => { - return await promise; - }); - -function PlasmicRandomDynamicPageButton__RenderFunc(props: { - variants: PlasmicRandomDynamicPageButton__VariantsArgs; - args: PlasmicRandomDynamicPageButton__ArgsType; - overrides: PlasmicRandomDynamicPageButton__OverridesType; - forNode?: string; -}) { - const { variants, overrides, forNode } = props; - - const $ctx = ph.useDataEnv?.() || {}; - const args = React.useMemo(() => Object.assign({}, props.args), [props.args]); - - const $props = { - ...args, - ...variants - }; - const refsRef = React.useRef({}); - const $refs = refsRef.current; - - const currentUser = p.useCurrentUser?.() || {}; - const [$queries, setDollarQueries] = React.useState({}); - - return ( - - ) as React.ReactElement | null; -} - -const PlasmicDescendants = { - root: ["root"] -} as const; -type NodeNameType = keyof typeof PlasmicDescendants; -type DescendantsType = - (typeof PlasmicDescendants)[T][number]; -type NodeDefaultElementType = { - root: typeof Button; -}; - -type ReservedPropsType = "variants" | "args" | "overrides"; -type NodeOverridesType = Pick< - PlasmicRandomDynamicPageButton__OverridesType, - DescendantsType ->; -type NodeComponentProps = - // Explicitly specify variants, args, and overrides as objects - { - variants?: PlasmicRandomDynamicPageButton__VariantsArgs; - args?: PlasmicRandomDynamicPageButton__ArgsType; - overrides?: NodeOverridesType; - } & Omit & // Specify variants directly as props - /* Specify args directly as props*/ Omit< - PlasmicRandomDynamicPageButton__ArgsType, - ReservedPropsType - > & - /* Specify overrides for each element directly as props*/ Omit< - NodeOverridesType, - ReservedPropsType | VariantPropType | ArgPropType - > & - /* Specify props for the root element*/ Omit< - Partial>, - ReservedPropsType | VariantPropType | ArgPropType | DescendantsType - >; - -function makeNodeComponent(nodeName: NodeName) { - type PropsType = NodeComponentProps & { key?: React.Key }; - const func = function ( - props: T & StrictProps - ) { - const { variants, args, overrides } = React.useMemo( - () => - deriveRenderOpts(props, { - name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], - internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps, - internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps - }), - [props, nodeName] - ); - return PlasmicRandomDynamicPageButton__RenderFunc({ - variants, - args, - overrides, - forNode: nodeName - }); - }; - if (nodeName === "root") { - func.displayName = "PlasmicRandomDynamicPageButton"; - } else { - func.displayName = `PlasmicRandomDynamicPageButton.${nodeName}`; - } - return func; -} - -export const PlasmicRandomDynamicPageButton = Object.assign( - // Top-level PlasmicRandomDynamicPageButton renders the root element - makeNodeComponent("root"), - { - // Helper components rendering sub-elements - - // Metadata about props expected for PlasmicRandomDynamicPageButton - internalVariantProps: PlasmicRandomDynamicPageButton__VariantProps, - internalArgProps: PlasmicRandomDynamicPageButton__ArgProps - } -); - -export default PlasmicRandomDynamicPageButton; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx deleted file mode 100644 index 5aa18ce645f..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -import React from "react"; -import { classNames } from "@plasmicapp/react-web"; - -export type ChecksvgIconProps = React.ComponentProps<"svg"> & { - title?: string; -}; - -export function ChecksvgIcon(props: ChecksvgIconProps) { - const { className, style, title, ...restProps } = props; - return ( - - {title && {title}} - - - - ); -} - -export default ChecksvgIcon; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx deleted file mode 100644 index 8e45091b20c..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-nocheck -/* eslint-disable */ -/* tslint:disable */ -/* prettier-ignore-start */ -import React from "react"; -import { classNames } from "@plasmicapp/react-web"; - -export type IconIconProps = React.ComponentProps<"svg"> & { - title?: string; -}; - -export function IconIcon(props: IconIconProps) { - const { className, style, title, ...restProps } = props; - return ( - - {title && {title}} - - - - ); -} - -export default IconIcon; -/* prettier-ignore-end */ diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/index.tsx b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/index.tsx deleted file mode 100644 index 9067bb52db7..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; - -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/react-app-env.d.ts b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5fc6b..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/reportWebVitals.ts b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16e0fb..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/setupTests.ts b/packages/create-plasmic-app/cpa-out/react-loader-ts/src/setupTests.ts deleted file mode 100644 index 8f2609b7b3e..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/packages/create-plasmic-app/cpa-out/react-loader-ts/tsconfig.json b/packages/create-plasmic-app/cpa-out/react-loader-ts/tsconfig.json deleted file mode 100644 index a273b0cfc0e..00000000000 --- a/packages/create-plasmic-app/cpa-out/react-loader-ts/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} diff --git a/packages/create-plasmic-app/package.json b/packages/create-plasmic-app/package.json index 1f62fa8ba40..e5d7d982856 100644 --- a/packages/create-plasmic-app/package.json +++ b/packages/create-plasmic-app/package.json @@ -1,6 +1,6 @@ { "name": "create-plasmic-app", - "version": "0.0.96", + "version": "0.0.99", "description": "Create Plasmic-powered React apps", "main": "./dist/lib.js", "types": "./dist/lib.d.ts", @@ -12,9 +12,8 @@ "create-plasmic-app": "./dist/index.js" }, "scripts": { - "wtest": "jest --colors --watchAll", - "test": "jest --colors", - "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch", + "test": "TEST_CWD=`pwd` yarn --cwd=../.. test --passWithNoTests", + "coverage": "TEST_CWD=`pwd` yarn --cwd=../.. test --coverage --passWithNoTests", "build": "eslint 'src/**' && tsc", "run-cpa": "yarn build && ts-node run-cpa.ts", "create-plasmic-app": "ts-node src/index.ts", @@ -30,14 +29,7 @@ "@types/semver": "^7.3.5", "@types/update-notifier": "^5.0.0", "@types/validate-npm-package-name": "^3.0.2", - "@types/yargs": "^16.0.0", - "@typescript-eslint/eslint-plugin": "5.59.0", - "@typescript-eslint/parser": "5.59.0", - "eslint": "^8.50.0", - "jest": "^26.6.3", - "jest-circus": "^26.6.3", - "ts-jest": "^26.5.3", - "ts-node": "^10.9.1" + "@types/yargs": "^16.0.0" }, "dependencies": { "@plasmicapp/cli": "0.1.187", diff --git a/packages/create-plasmic-app/src/index.ts b/packages/create-plasmic-app/src/index.ts index 3ac1fcf020b..9c250160b43 100644 --- a/packages/create-plasmic-app/src/index.ts +++ b/packages/create-plasmic-app/src/index.ts @@ -21,9 +21,9 @@ const createPlasmicAppVersion = updateNotify(); const argv = yargs .command( "$0 [projectName]", - "Create a Plasmic app with Next.js, Gatsby, or Create React App", - (yargs) => { - yargs + "Create a Plasmic app with Next.js, Gatsby, or React (Vite)", + (yargs2) => { + yargs2 .usage("Usage: $0 [projectName] [options]") .positional("projectName", { describe: "Project and NPM package name", @@ -62,17 +62,17 @@ const argv = yargs .strict() .help("h") .alias("h", "help") - .check((argv) => { + .check((argv2) => { if ( - argv.scheme === "loader" && - !(argv.platform === "nextjs" || argv.platform === "gatsby") + argv2.scheme === "loader" && + !(argv2.platform === "nextjs" || argv2.platform === "gatsby") ) { throw new Error(`Loader scheme may only be used with Next.js or Gatsby`); } if ( - argv.appDir && - !(argv.platform === "nextjs" && argv.scheme === "loader") + argv2.appDir && + !(argv2.platform === "nextjs" && argv2.scheme === "loader") ) { throw new Error( `App dir may only be used with Next.js and loader scheme` @@ -119,8 +119,6 @@ async function maybePrompt( } // Keeping these as globals to easily share with our `crash` function -const projectName: string | undefined = - argv._.length > 0 ? argv._[0] + "" : undefined; let resolvedProjectPath: string; /** @@ -176,8 +174,8 @@ async function run(): Promise { value: "gatsby", }, { - name: "Create React App (advanced)", - short: "Create React App", + name: "React (Vite)", + short: "React (Vite)", value: "react", }, ], diff --git a/packages/create-plasmic-app/src/lib.ts b/packages/create-plasmic-app/src/lib.ts index 6794800f65f..69f63020a05 100644 --- a/packages/create-plasmic-app/src/lib.ts +++ b/packages/create-plasmic-app/src/lib.ts @@ -149,7 +149,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise { : platform === "gatsby" ? `${npmRunCmd} develop` : platform === "react" - ? `${npmRunCmd} start` + ? `${npmRunCmd} dev` : ""; const relativeDir = path.relative(process.cwd(), resolvedProjectPath); diff --git a/packages/create-plasmic-app/src/react/react.ts b/packages/create-plasmic-app/src/react/react.ts index d92c29f5daa..7fdd1194eaa 100644 --- a/packages/create-plasmic-app/src/react/react.ts +++ b/packages/create-plasmic-app/src/react/react.ts @@ -16,10 +16,31 @@ export const reactStrategy: CPAStrategy = { create: async (args) => { const { projectPath, jsOrTs } = args; let { template } = args; - const createCommand = `npx create-react-app@latest ${projectPath}`; - if (!template && jsOrTs === "ts") { - template = "typescript"; + /* create-vite package checks if the targetDir doesn't exist then it creates the targetDir in the + current directory instead of the targetDir path. For example, + 1. Let's say current directory is /tmp/cpa-out + 2. npm create vite@latest /private/tmp/cpa-out/react-codegen-ts will create + /tmp/cpa-out/private/tmp/cpa-out/react-codegen-ts directory instead of /private/tmp/cpa-out/react-codegen-ts + + To avoid this behaviour, we will ensure the fullProjectPath exists + 1. we get the projectName (react-codegen-ts), and parentDir (/private/tmp/cpa-out) + 2. change directory to parentDir and execute the command with projectName + */ + const fullProjectPath = path.isAbsolute(projectPath) + ? projectPath + : path.resolve(process.cwd(), projectPath); + + await fs.mkdir(fullProjectPath, { recursive: true }); + + const projectName = path.basename(fullProjectPath); + const parentDir = path.dirname(fullProjectPath); + process.chdir(parentDir); + + const createCommand = `npm create vite@latest ${projectName} --`; + + if (!template) { + template = jsOrTs === "ts" ? "react-ts" : "react"; } const templateArg = template ? ` --template ${template}` : ""; @@ -35,7 +56,28 @@ export const reactStrategy: CPAStrategy = { } }, overwriteConfig: async (args) => { - // No config to overwrite + const { projectPath, jsOrTs } = args; + + if (jsOrTs === "ts") { + const tsConfigJsonPath = path.join(projectPath, "tsconfig.app.json"); + let tsConfigJson = await fs.readFile(tsConfigJsonPath, "utf8"); + + /* tsconfig.app.json has comments such as /* Bundler mode */ /* Linting */ + /* We need to remove them before parsing the json */ + tsConfigJson = tsConfigJson.replace(/\/\*[\s\S]*?\*\//g, ""); + tsConfigJson = tsConfigJson.replace(/\/\/.*$/gm, ""); + + const tsConfig = JSON.parse(tsConfigJson); + /* In our codegen, we have components where React is imported but not used, we need to + turn off the `noUnusedLocals` rule to ensure the project builds successfully. + */ + tsConfig.compilerOptions = { + ...tsConfig.compilerOptions, + noUnusedLocals: false, + }; + + await fs.writeFile(tsConfigJsonPath, JSON.stringify(tsConfig, null, 2)); + } }, generateFiles: async ({ scheme, @@ -47,7 +89,7 @@ export const reactStrategy: CPAStrategy = { if (scheme === "loader") { // Nothing to do } else { - // Delete existing entry point App.tsx and related test + // Delete existing App.tsx and related test deleteGlob(path.join(projectPath, "src", "App*")); await runCodegenSync({ @@ -89,17 +131,6 @@ export const reactStrategy: CPAStrategy = { await fs.writeFile(indexPath, content); } - // Deactivate React.StrictMode from index.js or index.tsx - const indexFileName = path.join( - projectPath, - "src", - `index.${jsOrTs === "js" ? "js" : "tsx"}` - ); - let indexFile = (await fs.readFile(indexFileName)).toString(); - indexFile = indexFile.replace("", ""); - indexFile = indexFile.replace("", ""); - await fs.writeFile(indexFileName, indexFile); - return; }, build: async (args) => { diff --git a/packages/create-plasmic-app/src/utils/file-utils.ts b/packages/create-plasmic-app/src/utils/file-utils.ts index 16f21172412..95b371a7fd0 100644 --- a/packages/create-plasmic-app/src/utils/file-utils.ts +++ b/packages/create-plasmic-app/src/utils/file-utils.ts @@ -1,13 +1,16 @@ -import type { PlasmicConfig } from "@plasmicapp/cli/dist/utils/config-utils"; +import type { + ComponentConfig, + PlasmicConfig, +} from "@plasmicapp/cli/dist/utils/config-utils"; import { existsSync, promises as fs, unlinkSync } from "fs"; import glob from "glob"; import L from "lodash"; import * as path from "upath"; import { README } from "../templates/readme"; import { WELCOME_PAGE } from "../templates/welcomePage"; -import { JsOrTs, PlatformType } from "../utils/types"; import { ensure } from "./lang-utils"; import { installUpgrade } from "./npm-utils"; +import { JsOrTs, PlatformType } from "./types"; /** * Runs the search pattern through `glob` and deletes all resulting files @@ -121,45 +124,56 @@ export default App; * @param noPages - don't render links to pages * @returns */ -export function generateWelcomePage(config: any, platform: string): string { - let hasPages = false; - let pageComponents: any[]; - let pagesDir: string; +export function generateWelcomePage( + config: PlasmicConfig, + platform: string +): string { + let pages: + | { + components: ComponentConfig[]; + dir: string; + getPageSection: () => string; + } + | undefined; if (platform !== "react" && config && L.isArray(config.projects)) { - pageComponents = L.flatMap(config.projects, (p) => p.components).filter( + const components = L.flatMap(config.projects, (p) => p.components).filter( (c) => c.componentType === "page" ); - pagesDir = config?.nextjsConfig?.pagesDir ?? config?.gatsbyConfig?.pagesDir; - if (pageComponents.length > 0 && pagesDir) { - hasPages = true; - } - } - const getPageSection = () => { - const pageLinks = pageComponents - .map((pc) => { - // Get the relative path on the filesystem - const relativePath = path.relative(pagesDir, pc.importSpec.modulePath); - // Format as an absolute path without the extension name - const relativeLink = "/" + stripExtension(relativePath); - if (platform === "nextjs") { - return `
  • ${pc.name} - ${relativeLink}
  • `; - } else { - return `
  • ${pc.name} - ${relativeLink}
  • `; - } - }) - .join("\n"); - return ` + const dir = + config?.nextjsConfig?.pagesDir ?? config?.gatsbyConfig?.pagesDir; + if (components.length > 0 && dir) { + pages = { + components, + dir, + getPageSection: () => { + const pageLinks = components + .map((pc) => { + // Get the relative path on the filesystem + const relativePath = path.relative(dir, pc.importSpec.modulePath); + // Format as an absolute path without the extension name + const relativeLink = "/" + stripExtension(relativePath); + if (platform === "nextjs") { + return `
  • ${pc.name} - ${relativeLink}
  • `; + } else { + return `
  • ${pc.name} - ${relativeLink}
  • `; + } + }) + .join("\n"); + return `

    Your pages:

      ${pageLinks}
    `; - }; + }, + }; + } + } const content = WELCOME_PAGE( - hasPages, + !!pages, platform, - hasPages ? getPageSection() : "" + pages?.getPageSection() ?? "" ); return content; } diff --git a/packages/data-sources/api/index.api.md b/packages/data-sources/api/index.api.md index 2f80adb60d3..18d1fc2cd68 100644 --- a/packages/data-sources/api/index.api.md +++ b/packages/data-sources/api/index.api.md @@ -46,6 +46,9 @@ export function deriveFieldConfigs(specifiedFieldsPar // @public (undocumented) export function executePlasmicDataOp(op: DataOp, opts?: ExecuteOpts): Promise; +// @public +export function executeServerQuery any>(serverQuery: ServerQuery): Promise> | ServerQueryResult<{}>>; + // @public (undocumented) export function Fetcher(props: FetcherProps): React_2.ReactElement | null; @@ -80,6 +83,12 @@ export interface ManyRowsResult { total?: number; } +// @public (undocumented) +export function mkPlasmicUndefinedServerProxy(): { + data: {}; + isLoading: boolean; +}; + // @public (undocumented) export function normalizeData(rawData: unknown): NormalizedData | undefined; @@ -105,6 +114,22 @@ export type QueryResult = Partial> & { isLoading?: boolean; }; +// @public (undocumented) +export interface ServerQuery any> { + // (undocumented) + execParams: () => Parameters; + // (undocumented) + fn: F; +} + +// @public (undocumented) +export interface ServerQueryResult { + // (undocumented) + data: T; + // (undocumented) + isLoading: boolean; +} + // @public (undocumented) export interface SingleRowResult { // (undocumented) diff --git a/packages/data-sources/package.json b/packages/data-sources/package.json index 2a0cf10291d..bb6beb354f0 100644 --- a/packages/data-sources/package.json +++ b/packages/data-sources/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.168", + "version": "0.1.171", "license": "MIT", "types": "./dist/index.d.ts", "main": "./dist/index.js", @@ -47,7 +47,7 @@ }, "dependencies": { "@plasmicapp/data-sources-context": "0.1.21", - "@plasmicapp/host": "1.0.209", + "@plasmicapp/host": "1.0.211", "@plasmicapp/isomorphic-unfetch": "1.0.3", "@plasmicapp/query": "0.1.79", "fast-stringify": "^2.0.0" diff --git a/packages/data-sources/src/index.tsx b/packages/data-sources/src/index.tsx index c72da441a01..a4cfb294bab 100644 --- a/packages/data-sources/src/index.tsx +++ b/packages/data-sources/src/index.tsx @@ -16,10 +16,16 @@ export { usePlasmicDataOp, usePlasmicInvalidate, } from "./hooks/usePlasmicDataOp"; +export { + executeServerQuery, + mkPlasmicUndefinedServerProxy, +} from "./serverQueries/server"; export type { DataSourceSchema, ManyRowsResult, Pagination, + ServerQuery, + ServerQueryResult, SingleRowResult, TableFieldSchema, TableFieldType, diff --git a/packages/data-sources/src/serverQueries/server.ts b/packages/data-sources/src/serverQueries/server.ts new file mode 100644 index 00000000000..a52c2dc874c --- /dev/null +++ b/packages/data-sources/src/serverQueries/server.ts @@ -0,0 +1,71 @@ +import { ServerQuery, ServerQueryResult } from "../types"; + +class PlasmicUndefinedServerError extends Error { + plasmicType: "PlasmicUndefinedServerError"; + constructor(msg?: string) { + super(msg); + this.plasmicType = "PlasmicUndefinedServerError"; + } +} + +function isPlasmicUndefinedServerError( + x: any +): x is PlasmicUndefinedServerError { + return ( + !!x && + typeof x === "object" && + (x as any).plasmicType === "PlasmicUndefinedServerError" + ); +} + +export function mkPlasmicUndefinedServerProxy() { + return { + data: new Proxy( + {}, + { + get: (_, prop) => { + if (prop === "isUndefinedServerProxy") { + return true; + } else if (prop === "then") { + return undefined; + } + throw new PlasmicUndefinedServerError("Data is not available yet"); + }, + } + ), + isLoading: true, + }; +} + +/** + * This returns either: + * * The resolved params, if they are available. + * * PlasmicUndefinedServerError, if when trying to evaluate the params, + * we encounter a PlasmicUndefinedServerError, so this operation cannot be + * performed until that dependency is resolved. + * * Throws an error if the params function throws a normal error. + */ +function resolveParams(params: () => any) { + try { + return params(); + } catch (err) { + if (isPlasmicUndefinedServerError(err)) { + return err; + } + throw err; + } +} + +/** + * Executes a server query, returning either the result of the query or a + * PlasmicUndefinedServerProxy if the query depends on data that is not yet ready + */ +export async function executeServerQuery any>( + serverQuery: ServerQuery +): Promise> | ServerQueryResult<{}>> { + const resolvedParams = resolveParams(serverQuery.execParams); + if (isPlasmicUndefinedServerError(resolvedParams)) { + return mkPlasmicUndefinedServerProxy(); + } + return { data: await serverQuery.fn(...resolvedParams), isLoading: false }; +} diff --git a/packages/data-sources/src/types.ts b/packages/data-sources/src/types.ts index d8a07c32b09..e5c6a1cab97 100644 --- a/packages/data-sources/src/types.ts +++ b/packages/data-sources/src/types.ts @@ -44,3 +44,13 @@ export interface ManyRowsResult { schema: TableSchema; paginate?: Pagination; } + +export interface ServerQuery any> { + fn: F; + execParams: () => Parameters; +} + +export interface ServerQueryResult { + data: T; + isLoading: boolean; +} diff --git a/packages/host/package.json b/packages/host/package.json index 5480e6a0fc2..ca14d09261d 100644 --- a/packages/host/package.json +++ b/packages/host/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/host", - "version": "1.0.209", + "version": "1.0.211", "description": "plasmic library for app hosting", "main": "dist/index.cjs.js", "types": "dist/index.d.ts", diff --git a/packages/host/src/data.tsx b/packages/host/src/data.tsx index 61f9d2fe483..891d76b5daf 100644 --- a/packages/host/src/data.tsx +++ b/packages/host/src/data.tsx @@ -3,6 +3,7 @@ import React, { ReactElement, ReactNode, useContext, + useMemo, } from "react"; import { tuple } from "./common"; @@ -90,18 +91,23 @@ export function DataProvider({ label, children, }: DataProviderProps) { - const existingEnv = useDataEnv() ?? {}; - if (!name) { + const parentContext = useDataEnv(); + const childContext = useMemo(() => { + if (!name) { + return null; + } + return { + ...parentContext, + [name]: data, + [mkMetaName(name)]: mkMetaValue({ hidden, advanced, label }), + }; + }, [parentContext, name, data, hidden, advanced, label]); + + if (childContext === null) { return <>{children}; } else { return ( - + {children} ); diff --git a/packages/host/src/index.ts b/packages/host/src/index.ts index 65b68191e2d..7a620b801c7 100644 --- a/packages/host/src/index.ts +++ b/packages/host/src/index.ts @@ -1,6 +1,8 @@ import * as PlasmicQuery from "@plasmicapp/query"; import * as React from "react"; import * as ReactDOM from "react-dom"; +import * as jsxDevRuntime from "react/jsx-dev-runtime"; +import * as jsxRuntime from "react/jsx-runtime"; import { registerRenderErrorListener, setPlasmicRootNode } from "./canvas-host"; import * as hostModule from "./exports"; import { setRepeatedElementFn } from "./repeatedElement"; @@ -21,6 +23,8 @@ if (root.__Sub == null) { root.__Sub = { React, ReactDOM, + jsxRuntime, + jsxDevRuntime, PlasmicQuery, hostModule, hostVersion, diff --git a/packages/loader-gatsby/package.json b/packages/loader-gatsby/package.json index e87f944944c..e35849de72b 100644 --- a/packages/loader-gatsby/package.json +++ b/packages/loader-gatsby/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/loader-gatsby", - "version": "1.0.377", + "version": "1.0.379", "types": "./dist/index.d.ts", "main": "./dist/index.js", "exports": { @@ -64,7 +64,7 @@ }, "dependencies": { "@plasmicapp/loader-core": "1.0.136", - "@plasmicapp/loader-react": "1.0.374", + "@plasmicapp/loader-react": "1.0.376", "@plasmicapp/watcher": "1.0.83", "lodash": "^4.17.21" } diff --git a/packages/loader-nextjs/package.json b/packages/loader-nextjs/package.json index b2b51c27d89..e1c9e525967 100644 --- a/packages/loader-nextjs/package.json +++ b/packages/loader-nextjs/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.412", + "version": "1.0.414", "license": "MIT", "types": "./dist/index.d.ts", "main": "./dist/index.js", @@ -82,7 +82,7 @@ "dependencies": { "@plasmicapp/loader-core": "1.0.136", "@plasmicapp/loader-edge": "1.0.67", - "@plasmicapp/loader-react": "1.0.374", + "@plasmicapp/loader-react": "1.0.376", "@plasmicapp/nextjs-app-router": "1.0.15", "@plasmicapp/watcher": "1.0.83", "server-only": "0.0.1" diff --git a/packages/loader-react/package.json b/packages/loader-react/package.json index 2fbfd1e1bf0..5afb62db6b8 100644 --- a/packages/loader-react/package.json +++ b/packages/loader-react/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/loader-react", - "version": "1.0.374", + "version": "1.0.376", "types": "./dist/index.d.ts", "main": "./dist/index.js", "module": "./dist/index.esm.js", @@ -53,7 +53,7 @@ }, "dependencies": { "@plasmicapp/data-sources-context": "0.1.21", - "@plasmicapp/host": "1.0.209", + "@plasmicapp/host": "1.0.211", "@plasmicapp/loader-core": "1.0.136", "@plasmicapp/loader-fetcher": "1.0.54", "@plasmicapp/loader-splits": "1.0.62", diff --git a/packages/loader-svelte/package.json b/packages/loader-svelte/package.json index 3e7541899f9..d11771135d5 100644 --- a/packages/loader-svelte/package.json +++ b/packages/loader-svelte/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/loader-svelte", - "version": "0.0.354", + "version": "0.0.356", "main": "dist/index.js", "module": "dist/index.mjs", "svelte": "src/index.js", @@ -39,7 +39,7 @@ "svelte-preprocess": "^4.9.1" }, "dependencies": { - "@plasmicapp/loader-react": "1.0.374", + "@plasmicapp/loader-react": "1.0.376", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/packages/loader-vue/package.json b/packages/loader-vue/package.json index 29bcbcd9062..7e59c27a4b4 100644 --- a/packages/loader-vue/package.json +++ b/packages/loader-vue/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/loader-vue", - "version": "0.1.368", + "version": "0.1.370", "types": "./dist/index.d.ts", "main": "./dist/index.js", "module": "./dist/index.esm.js", @@ -25,7 +25,7 @@ "node": ">=12" }, "dependencies": { - "@plasmicapp/loader-react": "1.0.374", + "@plasmicapp/loader-react": "1.0.376", "core-js": "^3.6.5", "react": ">=16.8.0", "react-dom": ">=16.8.0", diff --git a/packages/react-web-runtime/package.json b/packages/react-web-runtime/package.json index a3dfee02455..b8fa8183dcd 100644 --- a/packages/react-web-runtime/package.json +++ b/packages/react-web-runtime/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/react-web-runtime", - "version": "0.0.84", + "version": "0.0.90", "files": [ "jsx-runtime", "jsx-dev-runtime" @@ -14,7 +14,7 @@ "prepublishOnly": "npm run build" }, "devDependencies": { - "@plasmicapp/react-web": "0.2.364", + "@plasmicapp/react-web": "0.2.370", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.4", diff --git a/packages/react-web/.storybook/main.js b/packages/react-web/.storybook/main.ts similarity index 61% rename from packages/react-web/.storybook/main.js rename to packages/react-web/.storybook/main.ts index 7fba025285a..2db1561bcf9 100644 --- a/packages/react-web/.storybook/main.js +++ b/packages/react-web/.storybook/main.ts @@ -1,15 +1,17 @@ -module.exports = { +import type { StorybookConfig } from "@storybook/react-webpack5"; + +const config: StorybookConfig = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", + "@storybook/addon-webpack5-compiler-swc", ], framework: { name: "@storybook/react-webpack5", options: {}, }, - features: { - interactionsDebugger: true, - }, }; + +export default config; diff --git a/packages/react-web/.storybook/preview.js b/packages/react-web/.storybook/preview.ts similarity index 100% rename from packages/react-web/.storybook/preview.js rename to packages/react-web/.storybook/preview.ts diff --git a/packages/react-web/.storybook/test-runner.ts b/packages/react-web/.storybook/test-runner.ts new file mode 100644 index 00000000000..d6f417196ed --- /dev/null +++ b/packages/react-web/.storybook/test-runner.ts @@ -0,0 +1,9 @@ +import type { TestRunnerConfig } from "@storybook/test-runner"; + +const config: TestRunnerConfig = { + tags: { + skip: ["skip-test"], + }, +}; + +export default config; diff --git a/packages/react-web/package.json b/packages/react-web/package.json index 75bd865cc74..444cd40a60d 100644 --- a/packages/react-web/package.json +++ b/packages/react-web/package.json @@ -1,6 +1,6 @@ { "name": "@plasmicapp/react-web", - "version": "0.2.364", + "version": "0.2.370", "description": "plasmic library for rendering in the presentational style", "main": "dist/index.cjs.js", "types": "dist/index.d.ts", @@ -91,15 +91,15 @@ "prepublishOnly": "npm run build", "size": "size-limit", "analyze": "size-limit --why", - "storybook": "storybook dev -p 6006", + "storybook": "storybook dev -p 6006 --no-open", "build-storybook": "storybook build", "test-storybook": "test-storybook" }, "dependencies": { "@plasmicapp/auth-react": "0.0.22", - "@plasmicapp/data-sources": "0.1.168", + "@plasmicapp/data-sources": "0.1.171", "@plasmicapp/data-sources-context": "0.1.21", - "@plasmicapp/host": "1.0.209", + "@plasmicapp/host": "1.0.211", "@plasmicapp/loader-splits": "1.0.62", "@plasmicapp/nextjs-app-router": "1.0.15", "@plasmicapp/prepass": "1.0.19", @@ -140,17 +140,6 @@ "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.1.0", "@size-limit/preset-small-lib": "^4.10.2", - "@storybook/addon-actions": "^7.4.0", - "@storybook/addon-essentials": "^7.4.0", - "@storybook/addon-info": "^5.3.21", - "@storybook/addon-interactions": "^7.4.0", - "@storybook/addon-links": "^7.4.0", - "@storybook/addons": "^7.4.0", - "@storybook/jest": "^0.0.10", - "@storybook/react": "^7.4.0", - "@storybook/react-webpack5": "^7.4.0", - "@storybook/test-runner": "^0.13.0", - "@storybook/testing-library": "^0.0.13", "@types/classnames": "^2.3.1", "@types/clone": "^2.1.1", "@types/dlv": "^1.1.2", @@ -161,8 +150,7 @@ "rollup": "^3.26.1", "rollup-plugin-dts": "^5.3.0", "rollup-plugin-typescript2": "^0.35.0", - "size-limit": "^4.10.2", - "storybook": "^7.4.0" + "size-limit": "^4.10.2" }, "peerDependencies": { "react": ">=16.8.0", diff --git a/packages/react-web/src/states/helpers.ts b/packages/react-web/src/states/helpers.ts index 8333b44b254..380915407d1 100644 --- a/packages/react-web/src/states/helpers.ts +++ b/packages/react-web/src/states/helpers.ts @@ -233,7 +233,7 @@ export function set(obj: any, keys: any, val: any) { x, k; while (i < l) { - k = keys[i++]; + k = "" + keys[i++]; if (k === "__proto__" || k === "constructor" || k === "prototype") break; const newValue = i === l diff --git a/packages/react-web/src/stories/PlasmicImg.stories.tsx b/packages/react-web/src/stories/PlasmicImg.stories.tsx index dd9f9e71c94..d9f57dd209f 100644 --- a/packages/react-web/src/stories/PlasmicImg.stories.tsx +++ b/packages/react-web/src/stories/PlasmicImg.stories.tsx @@ -1,10 +1,18 @@ -import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { Meta, StoryFn } from "@storybook/react"; import React from "react"; import { PlasmicImg } from "../render/PlasmicImg"; import "../styles/plasmic.css"; -const Template: ComponentStory = (args: any) => { - const { containerWidth, containerHeight, ...rest } = args; +type PlasmicImgTemplateProps = React.ComponentProps & { + containerWidth?: number; + containerHeight?: number; +}; + +const Template: StoryFn = ({ + containerWidth, + containerHeight, + ...rest +}) => { return (
    @@ -38,11 +46,10 @@ export default { }, args: { src: { - src: - "https://img.plasmic.app/img-optimizer/v1/img/07a7153536a89fef14e0075c7632d6b3.jpg", + src: "https://img.plasmic.app/img-optimizer/v1/img/07a7153536a89fef14e0075c7632d6b3.jpg", fullWidth: 3840, fullHeight: 2160, }, loader: "plasmic", }, -} as ComponentMeta; +} satisfies Meta; diff --git a/packages/react-web/src/stories/UseDollarState.stories.tsx b/packages/react-web/src/stories/UseDollarState.stories.tsx index fa4a9161d2d..060205e84f3 100644 --- a/packages/react-web/src/stories/UseDollarState.stories.tsx +++ b/packages/react-web/src/stories/UseDollarState.stories.tsx @@ -1,8 +1,9 @@ -import { expect } from "@storybook/jest"; -import { Story } from "@storybook/react"; +import { StoryFn } from "@storybook/react"; +import { expect, waitFor } from "@storybook/test"; import { userEvent, within } from "@storybook/testing-library"; import React from "react"; import { + $StateSpec, generateStateOnChangeProp, generateStateValueProp, get, @@ -10,19 +11,16 @@ import { useDollarState, } from "../states"; import { CyclicStatesReferencesError } from "../states/errors"; -import { $StateSpec } from "../states/types"; const deepClone = function (o: T): T { return JSON.parse(JSON.stringify(o)); }; -const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); - export default { title: "UseDollarState", }; -interface CounterArgs { +interface CounterProps { stateType?: "private" | "readonly" | "writable"; showCount?: boolean; onChange?: (val: number) => void; @@ -31,13 +29,13 @@ interface CounterArgs { "data-testid"?: string; title?: React.ReactNode; } -const Counter: Story = (args) => { +const Counter: StoryFn = (props) => { const { stateType = "private" as const, showCount = true, useInitalFunction, title, - } = args; + } = props; const $state = useDollarState( [ @@ -65,7 +63,7 @@ const Counter: Story = (args) => { }, ], { - $props: args, + $props: props, } ); return ( @@ -74,7 +72,7 @@ const Counter: Story = (args) => { + + { + onOpenChange?.(newValue); + setOpen(newValue); + }} + ref={modalRef} + {...args} + > +
    +

    Test Modal

    + + +
    +
    +
    + ); + }, + play: async ({ canvasElement }) => { + const doc = within(document.body); + const canvas = within(canvasElement); + + await waitFor(() => { + expect(doc.getByTestId("modal-content")).toBeInTheDocument(); + }); + + // Find and click the close button + const closeButton = doc.getByText("Close Modal"); + await userEvent.click(closeButton); + + // Modal should be closed + await waitFor(() => { + expect(doc.queryByTestId("modal-content")).not.toBeInTheDocument(); + }); + + // Find and click the open button + const openButton = canvas.getByText("Open Modal"); + await userEvent.click(openButton); + + // Modal should be open again + await waitFor(() => { + expect(doc.getByTestId("modal-content")).toBeInTheDocument(); + }); + }, +}; + +export const SelectedInCanvas: Story = { + render: ({ __plasmic_selection_prop__, ...args }) => { + const [selected, setSelected] = useState(false); + useEffect(() => { + setTimeout(() => { + setSelected(true); + }, 1000); + }, []); + + return ( + // Simulate Plasmic canvas envirnment + + + + ); + }, + play: async () => { + // popovers are rendered outside canvas, so we need to use document.body + const doc = within(document.body); + + await waitFor(() => { + expect(doc.queryByTestId("modal-content")).not.toBeInTheDocument(); + }); + + await waitFor( + () => { + expect(doc.queryByTestId("modal-content")).toBeInTheDocument(); + }, + { timeout: 1100 } + ); + }, +}; diff --git a/plasmicpkgs/react-aria/src/registerModal.tsx b/plasmicpkgs/react-aria/src/registerModal.tsx index 7921456b40b..648a5430c0c 100644 --- a/plasmicpkgs/react-aria/src/registerModal.tsx +++ b/plasmicpkgs/react-aria/src/registerModal.tsx @@ -14,13 +14,14 @@ import { makeComponentName, Registerable, registerComponentHelper, + WithPlasmicCanvasComponentInfo, } from "./utils"; export interface BaseModalProps extends ModalOverlayProps, + WithPlasmicCanvasComponentInfo, HasControlContextData { - heading: React.ReactNode; - modalOverlayClass: string; + modalOverlayClass?: string; resetClassName?: string; children?: React.ReactNode; className?: string; @@ -51,6 +52,7 @@ export const BaseModal = forwardRef( const contextProps = React.useContext(PlasmicDialogTriggerContext); const isStandalone = !contextProps; + // TODO: React-aria does not like modal being passed defaultOpen while its inside a DialogTrigger. const mergedProps = mergeProps(contextProps, rest, { isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen, /* diff --git a/plasmicpkgs/react-aria/src/registerPopover.stories.tsx b/plasmicpkgs/react-aria/src/registerPopover.stories.tsx new file mode 100644 index 00000000000..741bc93cd10 --- /dev/null +++ b/plasmicpkgs/react-aria/src/registerPopover.stories.tsx @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { expect, fn, userEvent, waitFor, within } from "@storybook/test"; +import React from "react"; +import { BasePopover } from "./registerPopover"; + +const meta: Meta = { + title: "Components/BasePopover", + component: BasePopover, + args: { + onOpenChange: fn(), + children: ( +
    +

    Standalone Popover

    +

    This popover is rendered without a trigger

    +
    + ), + }, +}; + +export default meta; +type Story = StoryObj; + +// Standalone popover should always remain open, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view +export const Standalone: Story = { + play: async ({ args }) => { + const doc = within(document.body); + + // Verify popover is visible + await waitFor(() => { + expect(doc.getByTestId("popover-content")).toBeInTheDocument(); + }); + // Click outside should not dismiss popover + await userEvent.click(document.body); + expect(args.onOpenChange).not.toHaveBeenCalled(); + }, +}; diff --git a/plasmicpkgs/react-aria/src/registerPopover.tsx b/plasmicpkgs/react-aria/src/registerPopover.tsx index f9ae0b69a83..3bee19d4fc7 100644 --- a/plasmicpkgs/react-aria/src/registerPopover.tsx +++ b/plasmicpkgs/react-aria/src/registerPopover.tsx @@ -10,6 +10,7 @@ import { makeComponentName, Registerable, registerComponentHelper, + WithPlasmicCanvasComponentInfo, } from "./utils"; import { pickAriaComponentVariants, WithVariants } from "./variant-utils"; @@ -34,6 +35,7 @@ export interface BasePopoverControlContextData { } export interface BasePopoverProps extends React.ComponentProps, + WithPlasmicCanvasComponentInfo, WithVariants, HasControlContextData { className?: string; diff --git a/plasmicpkgs/react-aria/src/registerRadioGroup.stories.tsx b/plasmicpkgs/react-aria/src/registerRadioGroup.stories.tsx new file mode 100644 index 00000000000..c039b19c0de --- /dev/null +++ b/plasmicpkgs/react-aria/src/registerRadioGroup.stories.tsx @@ -0,0 +1,141 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { expect, fn, userEvent, within } from "@storybook/test"; +import React from "react"; +import { BaseRadio } from "./registerRadio"; +import { BaseRadioGroup } from "./registerRadioGroup"; + +const meta: Meta = { + title: "Components/BaseRadioGroup", + component: BaseRadioGroup, + args: { + onChange: fn(), + }, +}; + +export default meta; +type Story = StoryObj; + +// TODO: Assertions may be flaky because the registeredId is set inside useEffect, so in the first render, the id is randomly generated by react-aria itself. +// We use sleep to wait for the id to be set before asserting. +// This is marked todo because the sleep needs to be removed in a separate PR that fixes this issue +const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +const beforeEach = async () => { + await sleep(100); +}; + +// Helper function to create radio items +const createRadioItems = (count: number) => { + return Array.from({ length: count }, (_, i) => ({ + value: `radio${i + 1}`, + label: `Radio ${i + 1}`, + })); +}; + +// Basic RadioGroup with no initial selection +export const Basic: Story = { + args: { + children: createRadioItems(3).map((item) => ( + {item.label} + )), + }, + play: async ({ canvasElement, args }) => { + await beforeEach(); + const canvas = within(canvasElement); + const radios = await canvas.findAllByRole("radio"); + expect(radios).toHaveLength(3); + + // Verify initial state + radios.forEach((radio) => { + expect(radio).not.toBeChecked(); + }); + + // Test selection + await userEvent.click(radios[1]); + expect(radios[1]).toBeChecked(); + expect(args.onChange).toHaveBeenCalledWith("radio2"); + }, +}; + +// RadioGroup with pre-selected values +export const WithDefaultSelection: Story = { + args: { + defaultValue: "radio1", + children: createRadioItems(3).map((item) => ( + {item.label} + )), + }, + play: async ({ canvasElement, args }) => { + await beforeEach(); + const canvas = within(canvasElement); + const radios = await canvas.findAllByRole("radio"); + + // Verify initial state + expect(radios[0]).toBeChecked(); // via defaultSelected prop passed to the group + expect(radios[1]).not.toBeChecked(); + expect(radios[2]).not.toBeChecked(); + + // Test deselection + await userEvent.click(radios[2]); + expect(radios[0]).not.toBeChecked(); //changed + expect(radios[1]).not.toBeChecked(); //changed + expect(radios[2]).toBeChecked(); + expect(args.onChange).toHaveBeenCalledWith("radio3"); + }, +}; + +// Disabled RadioGroup +export const Disabled: Story = { + args: { + isDisabled: true, + defaultValue: "radio1", + children: createRadioItems(3).map((item) => ( + + {item.label} + + )), + }, + play: async ({ canvasElement, args }) => { + await beforeEach(); + const canvas = within(canvasElement); + const radios = await canvas.findAllByRole("radio"); + + // Verify disabled state + radios.forEach((radio) => { + expect(radio).toBeDisabled(); + }); + + // Verify clicks don't trigger changes + await userEvent.click(radios[1]); + expect(args.onChange).not.toHaveBeenCalled(); + expect(radios[1]).not.toBeChecked(); + }, +}; + +// ReadOnly RadioGroup +export const ReadOnly: Story = { + args: { + isReadOnly: true, + defaultValue: "radio1", + children: createRadioItems(3).map((item) => ( + + {item.label} + + )), + }, + play: async ({ canvasElement, args }) => { + await beforeEach(); + const canvas = within(canvasElement); + const radios = await canvas.findAllByRole("radio"); + + // Verify that the items are not disabled (but readonly) + radios.forEach((radio) => { + expect(radio).not.toBeDisabled(); + }); + + // Verify clicks don't trigger changes + await userEvent.click(radios[2]); + expect(args.onChange).not.toHaveBeenCalled(); + expect(radios[2]).not.toBeChecked(); + }, +}; diff --git a/plasmicpkgs/react-aria/src/registerSelect.stories.tsx b/plasmicpkgs/react-aria/src/registerSelect.stories.tsx new file mode 100644 index 00000000000..31c91c07175 --- /dev/null +++ b/plasmicpkgs/react-aria/src/registerSelect.stories.tsx @@ -0,0 +1,272 @@ +import { PlasmicCanvasContext } from "@plasmicapp/host"; +import type { Meta, StoryObj } from "@storybook/react"; +import { expect, fn, userEvent, waitFor, within } from "@storybook/test"; +import React, { useEffect, useState } from "react"; +import { BaseButton } from "./registerButton"; +import { BaseListBox } from "./registerListBox"; +import { BaseListBoxItem } from "./registerListBoxItem"; +import { BasePopover } from "./registerPopover"; +import { BaseSelect, BaseSelectValue } from "./registerSelect"; + +const meta: Meta = { + title: "Components/BaseSelect", + component: BaseSelect, + args: { + onSelectionChange: fn(), + onOpenChange: fn(), + }, +}; + +export default meta; +type Story = StoryObj; + +// Helper function to create list items +const createListItems = (count: number) => { + return Array.from({ length: count }, (_, i) => ({ + id: `${i + 1}`, + textValue: `Item ${i + 1}`, + children: `Item ${i + 1}`, + })); +}; + +const BoilerplateSelect = ({ children }: { children: React.ReactNode }) => ( + <> + + Select an option ▼ + + + {children} + + +); + +export const Basic: Story = { + args: { + children: ( + + {createListItems(3).map((item) => ( + + {item.children} + + ))} + + ), + }, + play: async ({ canvasElement, args }) => { + const canvas = within(canvasElement); + // popovers are rendered outside canvas, so we need to use document.body + const doc = within(document.body); + + // Get the button and input + const button = canvas.getByRole("button"); + + // Check that listbox is not in the document + expect(doc.queryByRole("listbox")).not.toBeInTheDocument(); + expect(button).toHaveTextContent("Select an option ▼"); + + // Open the select + await userEvent.click(button); + + // Ensure that clicking the button shows all available options, regardless of the input value + const options = await within(doc.getByRole("listbox")).findAllByRole( + "option" + ); + expect(options).toHaveLength(3); + + // Select an option + await userEvent.click(options[1]); + // Check that the input value is updated + expect(button).toHaveTextContent("Item 2"); + + // Check that listbox is not in the document + expect(doc.queryByRole("listbox")).not.toBeInTheDocument(); + + // Check that the onOpenChange and onSelectionChange are called as expected + expect(args.onOpenChange).toHaveBeenCalledTimes(2); + expect(args.onSelectionChange).toHaveBeenCalledOnce(); + }, +}; + +// TODO: Currently, the BaseSelect does not pass defaultSelectedKey prop to