From 561cbee68f1e4e2a85d5379129bba82fea5138a1 Mon Sep 17 00:00:00 2001 From: natemoo-re Date: Wed, 21 Jul 2021 23:11:40 +0000 Subject: [PATCH] [ci] yarn format --- .../src/pages/reference/renderer-reference.md | 2 + examples/framework-multiple/astro.config.mjs | 8 +-- .../src/components/PreactSFC.tsx | 4 +- .../src/components/SolidCounter.tsx | 6 +- examples/framework-solid/astro.config.mjs | 4 +- .../src/components/Counter.tsx | 6 +- packages/astro/snowpack-plugin-jsx.cjs | 67 +++++++++++-------- packages/astro/src/config_manager.ts | 6 +- packages/astro/src/runtime.ts | 2 +- packages/astro/test/preact-component.test.js | 5 +- packages/astro/test/react-component.test.js | 4 +- packages/renderers/renderer-preact/index.js | 12 ++-- packages/renderers/renderer-react/index.js | 12 ++-- packages/renderers/renderer-solid/client.js | 6 +- packages/renderers/renderer-solid/index.js | 8 +-- packages/renderers/renderer-solid/server.js | 17 ++--- 16 files changed, 82 insertions(+), 87 deletions(-) diff --git a/docs/src/pages/reference/renderer-reference.md b/docs/src/pages/reference/renderer-reference.md index 9dfd073a4..1a56e7639 100644 --- a/docs/src/pages/reference/renderer-reference.md +++ b/docs/src/pages/reference/renderer-reference.md @@ -79,11 +79,13 @@ export default { Astro is unique in that it allows you to mix multiple types of JSX/TSX files in a single project. It does this by reading the `jsxImportSource` and `jsxTransformOptions` from renderers and transforming a file with [Babel](https://babeljs.io/). #### `jsxImportSource` + This is the name of your library (for example `preact` or `react` or `solid-js`) which, if encountered in a file, will signal to Astro that this renderer should be used. Users may also manually define `/** @jsxImportSource preact */` in to ensure that the file is processed by this renderer (if, for example, the file has no imports). #### `jsxTransformOptions` + This is an `async` function that returns information about how to transform matching JSX files with [Babel](https://babeljs.io/). It supports [`plugins`](https://babeljs.io/docs/en/plugins) or [`presets`](https://babeljs.io/docs/en/presets) to be passed directly to Babel. > Keep in mind that this transform doesn't need to handle TSX separately from JSX, Astro handles that for you! diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index 88ceb4f4f..ee1983a24 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -11,11 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact', - '@astrojs/renderer-react', - '@astrojs/renderer-svelte', - '@astrojs/renderer-vue', - '@astrojs/renderer-solid', - ] + renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], }; diff --git a/examples/framework-multiple/src/components/PreactSFC.tsx b/examples/framework-multiple/src/components/PreactSFC.tsx index a92e258f8..3638caebd 100644 --- a/examples/framework-multiple/src/components/PreactSFC.tsx +++ b/examples/framework-multiple/src/components/PreactSFC.tsx @@ -4,9 +4,7 @@ export default function PreactSFC({ children }) { return ( <> -
- Hello from Preact! -
+
Hello from Preact!
); } diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx index 0ec274bb4..5a9ebe9d5 100644 --- a/examples/framework-multiple/src/components/SolidCounter.tsx +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -1,4 +1,4 @@ -import { createSignal } from "solid-js"; +import { createSignal } from 'solid-js'; /** a counter written with Solid */ export default function SolidCounter({ children }) { @@ -13,9 +13,7 @@ export default function SolidCounter({ children }) { 
{count()}
-
- {children} -
+
{children}
); } diff --git a/examples/framework-solid/astro.config.mjs b/examples/framework-solid/astro.config.mjs index d19e07745..59dd75f56 100644 --- a/examples/framework-solid/astro.config.mjs +++ b/examples/framework-solid/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-solid' - ] + renderers: ['@astrojs/renderer-solid'], }; diff --git a/examples/framework-solid/src/components/Counter.tsx b/examples/framework-solid/src/components/Counter.tsx index 78944a11e..12f4f9f78 100644 --- a/examples/framework-solid/src/components/Counter.tsx +++ b/examples/framework-solid/src/components/Counter.tsx @@ -1,4 +1,4 @@ -import { createSignal } from "solid-js"; +import { createSignal } from 'solid-js'; /** */ export default function SolidCounter({ children }) { @@ -13,9 +13,7 @@ export default function SolidCounter({ children }) { 
{count()}
-
- {children} -
+
{children}
); } diff --git a/packages/astro/snowpack-plugin-jsx.cjs b/packages/astro/snowpack-plugin-jsx.cjs index f7b31b76f..7d751b73f 100644 --- a/packages/astro/snowpack-plugin-jsx.cjs +++ b/packages/astro/snowpack-plugin-jsx.cjs @@ -3,7 +3,7 @@ const colors = require('kleur/colors'); const loggerPromise = import('./dist/logger.js'); const { promises: fs } = require('fs'); -const babel = require('@babel/core') +const babel = require('@babel/core'); const eslexer = require('es-module-lexer'); let error = (...args) => {}; @@ -27,10 +27,7 @@ function getLoader(fileExt) { * @type {import('snowpack').SnowpackPluginFactory} */ module.exports = function jsxPlugin(config, options = {}) { - const { - configManager, - logging, - } = options; + const { configManager, logging } = options; let didInit = false; return { @@ -59,39 +56,47 @@ module.exports = function jsxPlugin(config, options = {}) { sourcesContent: config.mode !== 'production', }); for (const warning of warnings) { - error(logging, 'renderer', `${colors.bold('!')} ${filePath} - ${warning.text}`); + error( + logging, + 'renderer', + `${colors.bold('!')} ${filePath} + ${warning.text}` + ); } let renderers = await configManager.getRenderers(); - const importSources = new Set(renderers.map(({ jsxImportSource }) => jsxImportSource).filter(i => i)); + const importSources = new Set(renderers.map(({ jsxImportSource }) => jsxImportSource).filter((i) => i)); const getRenderer = (importSource) => renderers.find(({ jsxImportSource }) => jsxImportSource === importSource); const getTransformOptions = async (importSource) => { const { name } = getRenderer(importSource); const { default: renderer } = await import(name); return renderer.jsxTransformOptions(transformContext); - } + }; if (importSources.size === 0) { - error(logging, 'renderer', `${colors.yellow(filePath)} -Unable to resolve a renderer that handles JSX transforms! Please include a \`renderer\` plugin which supports JSX in your \`astro.config.mjs\` file.`); - + error( + logging, + 'renderer', + `${colors.yellow(filePath)} +Unable to resolve a renderer that handles JSX transforms! Please include a \`renderer\` plugin which supports JSX in your \`astro.config.mjs\` file.` + ); + return { '.js': { code: `(() => { throw new Error("Hello world!"); - })()` + })()`, }, - } + }; } // If we only have a single renderer, we can skip a bunch of work! if (importSources.size === 1) { - const result = transform(code, filePath, await getTransformOptions(Array.from(importSources)[0])) + const result = transform(code, filePath, await getTransformOptions(Array.from(importSources)[0])); return { '.js': { - code: result.code || '' + code: result.code || '', }, }; } @@ -106,7 +111,7 @@ Unable to resolve a renderer that handles JSX transforms! Please include a \`ren }); let imports = []; - if (/import/.test(codeToScan)) { + if (/import/.test(codeToScan)) { let [i] = eslexer.parse(codeToScan); // @ts-ignore imports = i; @@ -138,39 +143,43 @@ Unable to resolve a renderer that handles JSX transforms! Please include a \`ren if (!importSource) { const importStatements = { - 'react': "import React from 'react'", - 'preact': "import { h } from 'preact'", - 'solid-js': "import 'solid-js/web'" - } + react: "import React from 'react'", + preact: "import { h } from 'preact'", + 'solid-js': "import 'solid-js/web'", + }; if (importSources.size > 1) { const defaultRenderer = Array.from(importSources)[0]; - error(logging, 'renderer', `${colors.yellow(filePath)} + error( + logging, + 'renderer', + `${colors.yellow(filePath)} Unable to resolve a renderer that handles this file! With more than one renderer enabled, you should include an import or use a pragma comment. Add ${colors.cyan(importStatements[defaultRenderer] || `import '${defaultRenderer}';`)} or ${colors.cyan(`/* jsxImportSource: ${defaultRenderer} */`)} to this file. -`); +` + ); } return { '.js': { - code: contents + code: contents, }, - } + }; } const result = transform(code, filePath, await getTransformOptions(importSource)); return { '.js': { - code: result.code || '' + code: result.code || '', }, }; }, cleanup() {}, }; -} +}; /** - * + * * @param code {string} * @param id {string} * @param opts {{ plugins?: import('@babel/core').PluginItem[], presets?: import('@babel/core').PluginItem[] }|undefined} @@ -178,7 +187,7 @@ Add ${colors.cyan(importStatements[defaultRenderer] || `import '${defaultRendere const transform = (code, id, { alias, plugins = [], presets = [] } = {}) => babel.transformSync(code, { presets, - plugins: [...plugins, alias ? ['babel-plugin-module-resolver', { root: process.cwd(), alias }] : undefined].filter(v => v), + plugins: [...plugins, alias ? ['babel-plugin-module-resolver', { root: process.cwd(), alias }] : undefined].filter((v) => v), cwd: process.cwd(), filename: id, ast: false, diff --git a/packages/astro/src/config_manager.ts b/packages/astro/src/config_manager.ts index e63b126f5..c33f560fc 100644 --- a/packages/astro/src/config_manager.ts +++ b/packages/astro/src/config_manager.ts @@ -18,7 +18,9 @@ interface RendererInstance { polyfills: string[]; hydrationPolyfills: string[]; jsxImportSource?: string; - jsxTransformOptions?: (transformContext: Omit) => undefined|{ plugins?: any[], presets?: any[] }|Promise<{ plugins?: any[], presets?: any[] }> + jsxTransformOptions?: ( + transformContext: Omit + ) => undefined | { plugins?: any[]; presets?: any[] } | Promise<{ plugins?: any[]; presets?: any[] }>; } const CONFIG_MODULE_BASE_NAME = '__astro_config.js'; @@ -121,7 +123,7 @@ export class ConfigManager { external: raw.external, polyfills: polyfillsNormalized, hydrationPolyfills: hydrationPolyfillsNormalized, - jsxImportSource: raw.jsxImportSource + jsxImportSource: raw.jsxImportSource, }; }); diff --git a/packages/astro/src/runtime.ts b/packages/astro/src/runtime.ts index 6bf099b4a..acfa58400 100644 --- a/packages/astro/src/runtime.ts +++ b/packages/astro/src/runtime.ts @@ -325,7 +325,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO astroConfig: AstroConfig; hmrPort?: number; mode: RuntimeMode; - logging: LogOptions, + logging: LogOptions; configManager: ConfigManager; } = { astroConfig, diff --git a/packages/astro/test/preact-component.test.js b/packages/astro/test/preact-component.test.js index 55debc8ad..67d071718 100644 --- a/packages/astro/test/preact-component.test.js +++ b/packages/astro/test/preact-component.test.js @@ -46,10 +46,9 @@ PreactComponent('Can use a pragma comment', async ({ runtime }) => { assert.ok(!result.error, `build error: ${result.error}`); const $ = doc(result.contents); - assert.equal($('#pragma-comment').length, 1, "rendered the PragmaComment component."); + assert.equal($('#pragma-comment').length, 1, 'rendered the PragmaComment component.'); }); - PreactComponent('Uses the new JSX transform', async ({ runtime }) => { const result = await runtime.load('/pragma-comment'); @@ -63,7 +62,7 @@ PreactComponent('Uses the new JSX transform', async ({ runtime }) => { } } const component = await runtime.load(componentUrl); - const jsxRuntime = component.imports.filter(i => i.specifier.includes('jsx-runtime')); + const jsxRuntime = component.imports.filter((i) => i.specifier.includes('jsx-runtime')); assert.ok(jsxRuntime, 'preact/jsx-runtime is used for the component'); }); diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js index 90b864925..c0f7d383a 100644 --- a/packages/astro/test/react-component.test.js +++ b/packages/astro/test/react-component.test.js @@ -86,9 +86,9 @@ React('uses the new JSX transform', async () => { } } const component = await runtime.load(componentUrl); - const jsxRuntime = component.imports.filter(i => i.specifier.includes('jsx-runtime')); + const jsxRuntime = component.imports.filter((i) => i.specifier.includes('jsx-runtime')); assert.ok(jsxRuntime, 'react/jsx-runtime is used for the component'); -}) +}); React.run(); diff --git a/packages/renderers/renderer-preact/index.js b/packages/renderers/renderer-preact/index.js index 5819ab0f2..68e79dcc6 100644 --- a/packages/renderers/renderer-preact/index.js +++ b/packages/renderers/renderer-preact/index.js @@ -5,11 +5,11 @@ export default { knownEntrypoints: ['preact', 'preact/jsx-runtime', 'preact-render-to-string'], jsxImportSource: 'preact', jsxTransformOptions: async () => { - const { default: { default: jsx }} = await import('@babel/plugin-transform-react-jsx'); + const { + default: { default: jsx }, + } = await import('@babel/plugin-transform-react-jsx'); return { - plugins: [ - jsx({}, { runtime: 'automatic', importSource: 'preact' }) - ] - } - } + plugins: [jsx({}, { runtime: 'automatic', importSource: 'preact' })], + }; + }, }; diff --git a/packages/renderers/renderer-react/index.js b/packages/renderers/renderer-react/index.js index 51a2ecba1..2d2c91fb0 100644 --- a/packages/renderers/renderer-react/index.js +++ b/packages/renderers/renderer-react/index.js @@ -5,11 +5,11 @@ export default { knownEntrypoints: ['react', 'react/jsx-runtime', 'react-dom', 'react-dom/server.js'], jsxImportSource: 'react', jsxTransformOptions: async () => { - const { default: { default: jsx }} = await import('@babel/plugin-transform-react-jsx'); + const { + default: { default: jsx }, + } = await import('@babel/plugin-transform-react-jsx'); return { - plugins: [ - jsx({}, { runtime: 'automatic', importSource: 'react' }) - ] - } - } + plugins: [jsx({}, { runtime: 'automatic', importSource: 'react' })], + }; + }, }; diff --git a/packages/renderers/renderer-solid/client.js b/packages/renderers/renderer-solid/client.js index 047de819d..2b34d8a5f 100644 --- a/packages/renderers/renderer-solid/client.js +++ b/packages/renderers/renderer-solid/client.js @@ -9,9 +9,7 @@ export default (element) => (Component, props) => { children: element.querySelector('astro-fragment'), }); - const children = Array.isArray(component) - ? component - : [ component ]; + const children = Array.isArray(component) ? component : [component]; element.replaceChildren(...children); -} +}; diff --git a/packages/renderers/renderer-solid/index.js b/packages/renderers/renderer-solid/index.js index 5848f78a4..9224c069d 100644 --- a/packages/renderers/renderer-solid/index.js +++ b/packages/renderers/renderer-solid/index.js @@ -8,10 +8,8 @@ export default { jsxTransformOptions: async ({ isSSR }) => { const [{ default: solid }] = await Promise.all([import('babel-preset-solid')]); const options = { - presets: [ - solid({}, { generate: isSSR ? 'ssr' : 'dom' }), - ] - } + presets: [solid({}, { generate: isSSR ? 'ssr' : 'dom' })], + }; if (isSSR) { options.alias = { @@ -21,5 +19,5 @@ export default { } return options; - } + }, }; diff --git a/packages/renderers/renderer-solid/server.js b/packages/renderers/renderer-solid/server.js index 8af4d8aab..86506ca45 100644 --- a/packages/renderers/renderer-solid/server.js +++ b/packages/renderers/renderer-solid/server.js @@ -9,14 +9,15 @@ async function check(Component, props, children) { } async function renderToStaticMarkup(Component, props, children) { - const html = await renderToStringAsync(() => ( - () => createComponent(Component, { - ...props, - // In Solid SSR mode, `ssr` creates the expected structure for `children`. - // In Solid client mode, `ssr` is just a stub. - children: ssr([`${children}`]), - }) - )); + const html = await renderToStringAsync( + () => () => + createComponent(Component, { + ...props, + // In Solid SSR mode, `ssr` creates the expected structure for `children`. + // In Solid client mode, `ssr` is just a stub. + children: ssr([`${children}`]), + }) + ); return { html }; }