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 };
}