diff --git a/packages/generator/src/generator.ts b/packages/generator/src/generator.ts index 2943080f84..980899c3eb 100644 --- a/packages/generator/src/generator.ts +++ b/packages/generator/src/generator.ts @@ -6,7 +6,6 @@ import Enquirer from "enquirer" import {EventEmitter} from "events" import * as fs from "fs-extra" import j from "jscodeshift" -import {Collection} from "jscodeshift/src/Collection" import {create as createStore, Store} from "mem-fs" import {create as createEditor, Editor} from "mem-fs-editor" import * as path from "path" @@ -70,9 +69,9 @@ function replaceConditionalNode( // expressions that aren't targeting templateValues so templates can include // checks for other env variables function replaceConditionalStatements( - program: Collection, + program: j.Collection, templateValues: any, -): Collection { +): j.Collection { const processEnvRequirements = { test: { object: { @@ -90,7 +89,7 @@ function replaceConditionalStatements( return program } -function replaceJsxConditionals(program: Collection, templateValues: any) { +function replaceJsxConditionals(program: j.Collection, templateValues: any) { program.find(j.JSXIdentifier, {name: "if"}).forEach((path) => { if (j.JSXOpeningElement.check(path.parent.node)) { const conditionPath = j(path.parent) diff --git a/packages/installer/src/index.ts b/packages/installer/src/index.ts index 3c31d3c45b..7095b7d403 100644 --- a/packages/installer/src/index.ts +++ b/packages/installer/src/index.ts @@ -9,3 +9,4 @@ export {type as PrintMessageType} from "./executors/print-message-executor" export * from "./utils/paths" export * from "./transforms" export {customTsParser} from "./utils/transform" +export type {Program} from "./types" diff --git a/packages/installer/src/transforms/add-blitz-middleware.ts b/packages/installer/src/transforms/add-blitz-middleware.ts index a11034a367..088be010de 100644 --- a/packages/installer/src/transforms/add-blitz-middleware.ts +++ b/packages/installer/src/transforms/add-blitz-middleware.ts @@ -1,8 +1,9 @@ import type {ExpressionKind} from "ast-types/gen/kinds" import j from "jscodeshift" +import {Program} from "../types" import {transformBlitzConfig} from "." -export const addBlitzMiddleware = (program: j.Collection, middleware: ExpressionKind) => +export const addBlitzMiddleware = (program: Program, middleware: ExpressionKind): Program => transformBlitzConfig(program, (config) => { // Locate the middleware property const middlewareProp = config.properties.find( diff --git a/packages/installer/src/transforms/add-import.ts b/packages/installer/src/transforms/add-import.ts index cf0ec80681..b1c9e304b4 100644 --- a/packages/installer/src/transforms/add-import.ts +++ b/packages/installer/src/transforms/add-import.ts @@ -1,10 +1,7 @@ import j from "jscodeshift" -import {Collection} from "jscodeshift/src/Collection" +import {Program} from "../types" -export function addImport( - program: Collection, - importToAdd: j.ImportDeclaration, -): Collection { +export function addImport(program: Program, importToAdd: j.ImportDeclaration): Program { const importStatementCount = program.find(j.ImportDeclaration).length if (importStatementCount === 0) { program.find(j.Statement).at(0).insertBefore(importToAdd) diff --git a/packages/installer/src/transforms/find-module-exports-expressions.ts b/packages/installer/src/transforms/find-module-exports-expressions.ts index a5bc07df7f..1c28b16493 100644 --- a/packages/installer/src/transforms/find-module-exports-expressions.ts +++ b/packages/installer/src/transforms/find-module-exports-expressions.ts @@ -1,8 +1,8 @@ import j from "jscodeshift" -import {Collection} from "jscodeshift/src/Collection" +import {Program} from "../types" -export function findModuleExportsExpressions(program: Collection) { - return program.find(j.AssignmentExpression).filter((path) => { +export const findModuleExportsExpressions = (program: Program) => + program.find(j.AssignmentExpression).filter((path) => { const {left, right} = path.value return ( left.type === "MemberExpression" && @@ -12,4 +12,3 @@ export function findModuleExportsExpressions(program: Collection) { right.type === "ObjectExpression" ) }) -} diff --git a/packages/installer/src/transforms/transform-blitz-config.ts b/packages/installer/src/transforms/transform-blitz-config.ts index c134a37307..3606c47bd1 100644 --- a/packages/installer/src/transforms/transform-blitz-config.ts +++ b/packages/installer/src/transforms/transform-blitz-config.ts @@ -1,8 +1,9 @@ import type {ExpressionKind} from "ast-types/gen/kinds" import j from "jscodeshift" +import {Program} from "../types" function recursiveConfigSearch( - program: j.Collection, + program: Program, obj: ExpressionKind, ): j.ObjectExpression | undefined { // Identifier being a variable name @@ -41,9 +42,9 @@ function recursiveConfigSearch( export type TransformBlitzConfigCallback = (config: j.ObjectExpression) => j.ObjectExpression export function transformBlitzConfig( - program: j.Collection, + program: Program, transform: TransformBlitzConfigCallback, -): j.Collection { +): Program { let moduleExportsExpressions = program.find(j.AssignmentExpression, { operator: "=", left: {object: {name: "module"}, property: {name: "exports"}}, diff --git a/packages/installer/src/transforms/update-babel-config.ts b/packages/installer/src/transforms/update-babel-config.ts index a03e87252d..d35763f042 100644 --- a/packages/installer/src/transforms/update-babel-config.ts +++ b/packages/installer/src/transforms/update-babel-config.ts @@ -1,6 +1,7 @@ import type {ExpressionKind} from "ast-types/gen/kinds" import j from "jscodeshift" import {JsonObject, JsonValue} from "../types" +import {Program} from "../types" import {findModuleExportsExpressions} from "./find-module-exports-expressions" type AddBabelItemDefinition = string | [name: string, options: JsonObject] @@ -24,11 +25,7 @@ const jsonValueToExpression = (value: JsonValue): ExpressionKind => ), ) -function updateBabelConfig( - program: j.Collection, - item: AddBabelItemDefinition, - key: string, -) { +function updateBabelConfig(program: Program, item: AddBabelItemDefinition, key: string): Program { findModuleExportsExpressions(program).forEach((moduleExportsExpression) => { j(moduleExportsExpression) .find(j.ObjectProperty, {key: {name: key}}) @@ -108,7 +105,7 @@ function updateBabelConfig( return program } -export const addBabelPreset = (program: j.Collection, preset: AddBabelItemDefinition) => +export const addBabelPreset = (program: Program, preset: AddBabelItemDefinition): Program => updateBabelConfig(program, preset, "presets") -export const addBabelPlugin = (program: j.Collection, plugin: AddBabelItemDefinition) => +export const addBabelPlugin = (program: Program, plugin: AddBabelItemDefinition): Program => updateBabelConfig(program, plugin, "plugins") diff --git a/packages/installer/src/transforms/wrap-blitz-config.ts b/packages/installer/src/transforms/wrap-blitz-config.ts index c64bf6771d..a43df2f4c6 100644 --- a/packages/installer/src/transforms/wrap-blitz-config.ts +++ b/packages/installer/src/transforms/wrap-blitz-config.ts @@ -1,10 +1,7 @@ import j from "jscodeshift" -import {Collection} from "jscodeshift/src/Collection" +import {Program} from "../types" -export function wrapBlitzConfig( - program: Collection, - functionName: string, -): Collection { +export function wrapBlitzConfig(program: Program, functionName: string): Program { let moduleExportsExpressions = program.find(j.AssignmentExpression, { operator: "=", left: {object: {name: "module"}, property: {name: "exports"}}, diff --git a/packages/installer/src/types.ts b/packages/installer/src/types.ts index 1f4bb4c5a0..464b86165b 100644 --- a/packages/installer/src/types.ts +++ b/packages/installer/src/types.ts @@ -1,3 +1,5 @@ +import type * as j from "jscodeshift" + export interface RecipeMeta { name: string description: string @@ -5,6 +7,8 @@ export interface RecipeMeta { repoLink: string } +export type Program = j.Collection + /** Matches a JSON object. This type can be useful to enforce some input to be JSON-compatible or as a super-type to be extended from. Don't use this as a direct return type as the user would have to double-cast it: `jsonObject as unknown as CustomResponse`. Instead, you could extend your CustomResponse type from it to ensure your type only uses JSON-compatible types: `interface CustomResponse extends JsonObject { … }`. diff --git a/packages/installer/src/utils/transform.ts b/packages/installer/src/utils/transform.ts index db050baa97..1cd5669a0f 100644 --- a/packages/installer/src/utils/transform.ts +++ b/packages/installer/src/utils/transform.ts @@ -1,8 +1,8 @@ import * as fs from "fs-extra" import j from "jscodeshift" -import {Collection} from "jscodeshift/src/Collection" import getBabelOptions, {Overrides} from "recast/parsers/_babel_options" import * as babel from "recast/parsers/babel" +import {Program} from "../types" export const customTsParser = { parse(source: string, options?: Overrides) { @@ -24,9 +24,7 @@ export interface TransformResult { } export type StringTransformer = (program: string) => string | Promise -export type Transformer = ( - program: Collection, -) => Collection | Promise> +export type Transformer = (program: Program) => Program | Promise export function stringProcessFile( original: string, diff --git a/recipes/base-web/index.ts b/recipes/base-web/index.ts index ff7c726598..7944e0e171 100644 --- a/recipes/base-web/index.ts +++ b/recipes/base-web/index.ts @@ -30,7 +30,7 @@ export default RecipeBuilder() stepName: "Import required providers and wrap the root of the app with them", explanation: `Additionally we supply StyletronProvider with 'value' and 'debug' props. BaseProvider requires a 'theme' prop we set with default Base Web's light theme.`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const styletronProviderImport = j.importDeclaration( [j.importSpecifier(j.identifier("Provider"), j.identifier("StyletronProvider"))], j.literal("styletron-react"), @@ -102,7 +102,7 @@ export default RecipeBuilder() stepName: "Modify getInitialProps method and add stylesheets to Document", explanation: `To make Styletron work server-side we need to modify getInitialProps method of custom Document class. We also have to put Styletron's generated stylesheets in DocumentHead.`, singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { const styletronProviderImport = j.importDeclaration( [j.importSpecifier(j.identifier("Provider"), j.identifier("StyletronProvider"))], j.literal("styletron-react"), diff --git a/recipes/bulma/index.ts b/recipes/bulma/index.ts index c82f528389..3892c2c21e 100644 --- a/recipes/bulma/index.ts +++ b/recipes/bulma/index.ts @@ -29,7 +29,7 @@ export default RecipeBuilder() stepName: "Import stylesheets", explanation: `Imports the stylesheet we just added into your app`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const stylesImport = j.importDeclaration([], j.literal("app/core/styles/index.scss")) return addImport(program, stylesImport) }, diff --git a/recipes/bumbag-ui/index.ts b/recipes/bumbag-ui/index.ts index 3560dff9db..54afd31681 100644 --- a/recipes/bumbag-ui/index.ts +++ b/recipes/bumbag-ui/index.ts @@ -1,8 +1,8 @@ -import {addImport, paths, RecipeBuilder} from "@blitzjs/installer" +import {addImport, paths, Program, RecipeBuilder} from "@blitzjs/installer" import type {NodePath} from "ast-types/lib/node-path" import j from "jscodeshift" -function wrapComponentWithBumbagProvider(program: j.Collection) { +function wrapComponentWithBumbagProvider(program: Program) { program .find(j.JSXElement) .filter( @@ -27,7 +27,7 @@ function wrapComponentWithBumbagProvider(program: j.Collection) { return program } -function injectInitializeColorModeAndExtractCritical(program: j.Collection) { +function injectInitializeColorModeAndExtractCritical(program: Program) { // Finds body element and injects InitializeColorMode before it. program.find(j.JSXElement, {openingElement: {name: {name: "body"}}}).forEach((path) => { const {node} = path @@ -88,7 +88,7 @@ export default RecipeBuilder() stepName: "Import BumbagProvider", explanation: `Import bumbag Provider as BumbagProvider into _app`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const stylesImport = j.importDeclaration( [j.importSpecifier(j.identifier("Provider as BumbagProvider"))], j.literal("bumbag"), @@ -103,7 +103,7 @@ export default RecipeBuilder() stepName: "ImportExtractCritical & initializeColorMode", explanation: `Import InitializeColorMode from bumbag, and extractCritical into _document`, singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { const initializeColorModeImport = j.importDeclaration( [j.importSpecifier(j.identifier("InitializeColorMode"))], j.literal("bumbag"), diff --git a/recipes/chakra-ui/index.ts b/recipes/chakra-ui/index.ts index 178a2cf072..d36e524210 100644 --- a/recipes/chakra-ui/index.ts +++ b/recipes/chakra-ui/index.ts @@ -1,9 +1,9 @@ -import {addImport, paths, RecipeBuilder} from "@blitzjs/installer" +import {addImport, paths, Program, RecipeBuilder} from "@blitzjs/installer" import type {NodePath} from "ast-types/lib/node-path" import j, {JSXIdentifier} from "jscodeshift" // Copied from https://github.com/blitz-js/blitz/pull/805, let's add this to the @blitzjs/installer -function wrapComponentWithChakraProvider(program: j.Collection) { +function wrapComponentWithChakraProvider(program: Program) { program .find(j.JSXElement) .filter( @@ -24,7 +24,7 @@ function wrapComponentWithChakraProvider(program: j.Collection) { return program } -function updateLabeledTextFieldWithInputComponent(program: j.Collection) { +function updateLabeledTextFieldWithInputComponent(program: Program) { program .find(j.TSInterfaceDeclaration) .find(j.TSExpressionWithTypeArguments) @@ -40,7 +40,7 @@ function updateLabeledTextFieldWithInputComponent(program: j.Collection) { +function replaceOuterDivWithFormControl(program: Program) { program .find(j.JSXElement) .filter((path) => { @@ -68,7 +68,7 @@ function replaceOuterDivWithFormControl(program: j.Collection) { return program } -function replaceInputWithChakraInput(program: j.Collection) { +function replaceInputWithChakraInput(program: Program) { program .find(j.JSXElement) .filter((path) => { @@ -89,7 +89,7 @@ function replaceInputWithChakraInput(program: j.Collection) { return program } -function replaceLabelWithChakraLabel(program: j.Collection) { +function replaceLabelWithChakraLabel(program: Program) { program .find(j.JSXElement) .filter((path) => { @@ -109,7 +109,7 @@ function replaceLabelWithChakraLabel(program: j.Collection) { return program } -function removeDefaultStyleElement(program: j.Collection) { +function removeDefaultStyleElement(program: Program) { program .find(j.JSXElement) .filter((path) => { @@ -148,7 +148,7 @@ export default RecipeBuilder() stepName: "Import ChakraProvider component", explanation: `Import the chakra-ui provider into _app, so it is accessible in the whole app`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const stylesImport = j.importDeclaration( [j.importSpecifier(j.identifier("ChakraProvider"))], j.literal("@chakra-ui/react"), @@ -163,7 +163,7 @@ export default RecipeBuilder() stepName: "Update the `LabeledTextField` with Chakra UI's `Input` component", explanation: `The LabeledTextField component uses Chakra UI's input component`, singleFileSearch: "app/core/components/LabeledTextField.tsx", - transform(program: j.Collection) { + transform(program) { // Add ComponentPropsWithoutRef import program.find(j.ImportDeclaration, {source: {value: "react"}}).forEach((path) => { let specifiers = path.value.specifiers || [] diff --git a/recipes/emotion/index.ts b/recipes/emotion/index.ts index 3784e67606..c76bf38795 100644 --- a/recipes/emotion/index.ts +++ b/recipes/emotion/index.ts @@ -1,8 +1,15 @@ -import {addBabelPlugin, addBabelPreset, addImport, paths, RecipeBuilder} from "@blitzjs/installer" +import { + addBabelPlugin, + addBabelPreset, + addImport, + paths, + Program, + RecipeBuilder, +} from "@blitzjs/installer" import j from "jscodeshift" import {join} from "path" -function applyGlobalStyles(program: j.Collection) { +function applyGlobalStyles(program: Program) { program.find(j.ExportDefaultDeclaration).forEach((exportPath) => { j(exportPath) .find(j.JSXElement, {openingElement: {name: {name: "ErrorBoundary"}}}) @@ -49,7 +56,7 @@ export default RecipeBuilder() stepName: "Import global styles", explanation: `Next, we'll import and render the global styles.`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const stylesImport = j.importDeclaration( [j.importSpecifier(j.identifier("globalStyles"))], j.literal("app/core/styles"), @@ -64,7 +71,7 @@ export default RecipeBuilder() stepName: "Add Babel plugin and preset", explanation: `Update the Babel configuration to use Emotion's plugin and preset to enable some advanced features.`, singleFileSearch: paths.babelConfig(), - transform(program: j.Collection) { + transform(program) { program = addBabelPlugin(program, "@emotion") program = addBabelPreset(program, [ "preset-react", diff --git a/recipes/ghost/index.ts b/recipes/ghost/index.ts index 7ca63ee0b4..adefc66bc1 100644 --- a/recipes/ghost/index.ts +++ b/recipes/ghost/index.ts @@ -1,6 +1,5 @@ import {addBlitzMiddleware, addImport, paths, RecipeBuilder} from "@blitzjs/installer" import j from "jscodeshift" -import {Collection} from "jscodeshift" import path from "path" export default RecipeBuilder() @@ -54,7 +53,7 @@ export default RecipeBuilder() stepName: "Add default middleware to expose ghost", explanation: "Adds ghostapi to middleware so we can expose it in queries and mutations.", singleFileSearch: paths.blitzConfig(), - transform(program: j.Collection) { + transform(program) { // // import ghostApi from integrations/ghost const cssBaselineImport = j.importDeclaration( [j.importSpecifier(j.identifier("ghostApi"))], diff --git a/recipes/logrocket/index.ts b/recipes/logrocket/index.ts index a115882220..bb69303a41 100644 --- a/recipes/logrocket/index.ts +++ b/recipes/logrocket/index.ts @@ -29,7 +29,7 @@ export default RecipeBuilder() stepName: "Import helpers and log user upon login", explanation: `We will add logic to initialize the LogRocket session and upon login, identify the user within LogRocket`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { // Ensure useSession is in the blitz imports. program.find(j.ImportDeclaration, {source: {value: "blitz"}}).forEach((blitzImportPath) => { let specifiers = blitzImportPath.value.specifiers || [] diff --git a/recipes/material-ui/index.ts b/recipes/material-ui/index.ts index 0fa873607d..d3c0abdfda 100644 --- a/recipes/material-ui/index.ts +++ b/recipes/material-ui/index.ts @@ -36,7 +36,7 @@ This will let the next.js app opt out of the React.Strict mode wrapping. Once yo stepName: "Add custom getInitialProps logic in Custom Document", explanation: `We will add custom getInitialProps logic in _document. We need to do this so that styles are correctly rendered on the server side.`, singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { // import ServerStyleSheets const serverStyleSheetsImport = j.importDeclaration( [j.importSpecifier(j.identifier("ServerStyleSheets"))], diff --git a/recipes/reflexjs/index.ts b/recipes/reflexjs/index.ts index a9dedd6c2a..59115a6c10 100644 --- a/recipes/reflexjs/index.ts +++ b/recipes/reflexjs/index.ts @@ -1,9 +1,9 @@ -import {addBabelPreset, addImport, paths, RecipeBuilder} from "@blitzjs/installer" +import {addBabelPreset, addImport, paths, Program, RecipeBuilder} from "@blitzjs/installer" import type {NodePath} from "ast-types/lib/node-path" import j from "jscodeshift" import {join} from "path" -function wrapComponentWithThemeProvider(program: j.Collection) { +function wrapComponentWithThemeProvider(program: Program) { program .find(j.JSXElement) .filter( @@ -30,7 +30,7 @@ function wrapComponentWithThemeProvider(program: j.Collection) { return program } -function injectInitializeColorMode(program: j.Collection) { +function injectInitializeColorMode(program: Program) { program.find(j.JSXElement, {openingElement: {name: {name: "body"}}}).forEach((path) => { const {node} = path path.replace( @@ -74,7 +74,7 @@ export default RecipeBuilder() explanation: "Add ThemeProvider component to `_app` and pass it the theme we just created", singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const providerImport = j.importDeclaration( [j.importSpecifier(j.identifier("ThemeProvider"))], j.literal("reflexjs"), @@ -97,7 +97,7 @@ export default RecipeBuilder() "Add the `InitializeColorMode` component to the document body to support Reflexjs color mode features.", singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { const initializeColorModeImport = j.importDeclaration( [j.importSpecifier(j.identifier("InitializeColorMode"))], j.literal("reflexjs"), @@ -114,7 +114,7 @@ export default RecipeBuilder() "Finally, update the Babel configuration to use the Reflfexjs preset. This automatically sets the jsx pragma in your Blitz app so you won't need to import it in your files.", singleFileSearch: paths.babelConfig(), - transform(program: j.Collection) { + transform(program) { return addBabelPreset(program, [ "blitz/babel", { diff --git a/recipes/secureheaders/index.ts b/recipes/secureheaders/index.ts index 61392ec913..881d97df33 100644 --- a/recipes/secureheaders/index.ts +++ b/recipes/secureheaders/index.ts @@ -1,4 +1,4 @@ -import {addImport, paths, RecipeBuilder, transformBlitzConfig} from "@blitzjs/installer" +import {addImport, paths, Program, RecipeBuilder, transformBlitzConfig} from "@blitzjs/installer" import j from "jscodeshift" import {join} from "path" @@ -22,7 +22,7 @@ export default RecipeBuilder() stepName: "Set meta tags", explanation: `Inserts meta tags into the element of _document.tsx`, singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { const secureHeadersImport = j.importDeclaration( [j.importSpecifier(j.identifier("computeCsp"))], j.literal("app/core/secureheaders"), @@ -83,7 +83,7 @@ export default RecipeBuilder() stepName: "Set custom headers", explanation: `Insert custom headers into blitz.config.js and disable the "X-Powered-By: Next.js" header`, singleFileSearch: paths.blitzConfig(), - transform(program: j.Collection) { + transform(program) { return addHttpHeaders(program, [ {name: "Strict-Transport-Security", value: "max-age=631138519"}, {name: "X-Frame-Options", value: "sameorigin"}, @@ -110,10 +110,7 @@ function addHttpMetaTag(name: string, value: j.JSXExpressionContainer | j.String ] } -const addHttpHeaders = ( - program: j.Collection, - headers: Array<{name: string; value: string}>, -) => +const addHttpHeaders = (program: Program, headers: Array<{name: string; value: string}>) => transformBlitzConfig(program, (config) => { let headersFunction = j.arrowFunctionExpression( [], diff --git a/recipes/styled-components/index.ts b/recipes/styled-components/index.ts index efa229dce6..413453001e 100644 --- a/recipes/styled-components/index.ts +++ b/recipes/styled-components/index.ts @@ -1,9 +1,9 @@ -import {addBabelPlugin, addImport, paths, RecipeBuilder} from "@blitzjs/installer" +import {addBabelPlugin, addImport, paths, Program, RecipeBuilder} from "@blitzjs/installer" import type {NodePath} from "ast-types/lib/node-path" import j from "jscodeshift" import {join} from "path" -function wrapComponentWithStyledComponentsThemeProvider(program: j.Collection) { +function wrapComponentWithStyledComponentsThemeProvider(program: Program) { program .find(j.JSXElement) .filter( @@ -64,7 +64,7 @@ export default RecipeBuilder() stepName: "Add custom getInitialProps logic in Custom Document", explanation: `We will add custom getInitialProps logic in _document. We need to do this so that styles are correctly rendered on the server side.`, singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { // import ServerStyleSheet const serverStyleSheetImport = j.importDeclaration( [j.importSpecifier(j.identifier("ServerStyleSheet"))], @@ -216,7 +216,7 @@ export default RecipeBuilder() stepName: "Import required provider and wrap the root of the app with it", explanation: `Additionally we supply ThemeProvider with a basic theme property and base global styles.`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { // Import styled-components. const styledComponentsProviderImport = j.importDeclaration( [j.importSpecifier(j.identifier("ThemeProvider"))], @@ -239,7 +239,7 @@ export default RecipeBuilder() stepName: "Add Babel plugin and preset", explanation: `Update the Babel configuration to use Styled Component's SSR plugin.`, singleFileSearch: paths.babelConfig(), - transform(program: j.Collection) { + transform(program) { return addBabelPlugin(program, [ "styled-components", { diff --git a/recipes/tailwind/index.ts b/recipes/tailwind/index.ts index ff2e5d6706..eb0f59682c 100644 --- a/recipes/tailwind/index.ts +++ b/recipes/tailwind/index.ts @@ -38,7 +38,7 @@ export default RecipeBuilder() stepName: "Import stylesheets", explanation: `Imports the stylesheet we just added into your app`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const stylesImport = j.importDeclaration([], j.literal("app/core/styles/index.css")) return addImport(program, stylesImport) }, diff --git a/recipes/theme-ui/index.ts b/recipes/theme-ui/index.ts index b795099d54..64accd7936 100644 --- a/recipes/theme-ui/index.ts +++ b/recipes/theme-ui/index.ts @@ -1,6 +1,7 @@ import { addImport, paths, + Program, RecipeBuilder, transformBlitzConfig, wrapBlitzConfig, @@ -16,7 +17,7 @@ const NEXT_MDX_PLUGIN_OPTIONS = [ j.property("init", j.identifier("extension"), j.literal(RegExp("mdx?$", ""))), ] -function initializePlugin(program: j.Collection, statement: j.Statement) { +function initializePlugin(program: Program, statement: j.Statement) { const importStatementCount = program.find(j.ImportDeclaration).length if (importStatementCount === 0) { @@ -33,7 +34,7 @@ function initializePlugin(program: j.Collection, statement: j.Stateme } // Copied from https://github.com/blitz-js/blitz/pull/805, let's add this to the @blitzjs/installer -function wrapComponentWithThemeProvider(program: j.Collection) { +function wrapComponentWithThemeProvider(program: Program) { program .find(j.JSXElement) .filter( @@ -64,7 +65,7 @@ function wrapComponentWithThemeProvider(program: j.Collection) { return program } -function injectInitializeColorMode(program: j.Collection) { +function injectInitializeColorMode(program: Program) { program.find(j.JSXElement, {openingElement: {name: {name: "body"}}}).forEach((path) => { const {node} = path path.replace( @@ -105,7 +106,7 @@ export default RecipeBuilder() explanation: `Now we have to update our blitz config to support MDX`, singleFileSearch: paths.blitzConfig(), - transform(program: j.Collection) { + transform(program) { program = addImport( program, j.importDeclaration( @@ -161,7 +162,7 @@ export default RecipeBuilder() explanation: `We need to import the InitializeColorMode component to support color mode features in Theme UI`, singleFileSearch: paths.document(), - transform(program: j.Collection) { + transform(program) { const initializeColorModeImport = j.importDeclaration( [j.importSpecifier(j.identifier("InitializeColorMode"))], j.literal("theme-ui"), @@ -177,7 +178,7 @@ export default RecipeBuilder() explanation: `We can import the theme provider into _app, so it is accessible in the whole app`, singleFileSearch: paths.app(), - transform(program: j.Collection) { + transform(program) { const providerImport = j.importDeclaration( [j.importSpecifier(j.identifier("ThemeProvider"))], j.literal("theme-ui"),