Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Fix: transpiling React.createElement into Preact h behavior #7435

Merged
merged 14 commits into from Dec 19, 2021
Merged

Fix: transpiling React.createElement into Preact h behavior #7435

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6081742
Feature: detect reactLib with pkg.alias.react
Shinyaigeek Dec 11, 2021
ca600b4
Chore: add test for preact aliasing
Shinyaigeek Dec 11, 2021
2be5e56
Merge branch 'v2' into fix/correct-jsx-runtime-import-source
Shinyaigeek Dec 13, 2021
09b9844
Chore: fix h -> React.createElement in Preact compat alias
Shinyaigeek Dec 14, 2021
e470610
Feature: convert alias into pragma in jsx-runtime transformation
Shinyaigeek Dec 14, 2021
cd066b1
Merge branch 'fix/correct-jsx-runtime-import-source' of https://githu…
Shinyaigeek Dec 14, 2021
ad8a85a
Merge branch 'v2' into fix/correct-jsx-runtime-import-source
Shinyaigeek Dec 14, 2021
db5d8dd
Fix: access pkg.alias with nullish coalescing
Shinyaigeek Dec 14, 2021
3aedb45
Update: add preact-compat to alias
Shinyaigeek Dec 14, 2021
e05804a
Update: prepare effectiveReactLib variable to set react pragma lib na…
Shinyaigeek Dec 16, 2021
ce3e884
Merge branch 'v2' into fix/correct-jsx-runtime-import-source
Shinyaigeek Dec 16, 2021
f35daf2
Merge branch 'v2' into fix/correct-jsx-runtime-import-source
Shinyaigeek Dec 17, 2021
4efec78
Chore: add jsx-transform with alias testing to check correctly import…
Shinyaigeek Dec 18, 2021
31fedf2
Merge branch 'fix/correct-jsx-runtime-import-source' of https://githu…
Shinyaigeek Dec 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/index.js
View file
Open in desktop
@@ -0,0 +1 @@
module.exports = <div />;
Empty file added ...tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/jsx-runtime.js
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions ...n-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json
View file
Open in desktop

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

12 changes: 12 additions & 0 deletions ...ages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/package.json
View file
Open in desktop
@@ -0,0 +1,12 @@
{
"private": true,
"dependencies": {
"preact": "^10.5"
},
"alias": {
"react": "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
"react/jsx-runtime": "preact/jsx-runtime"
}
}
Empty file added packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/yarn.lock
View file
Open in desktop
Empty file.
12 changes: 12 additions & 0 deletions packages/core/integration-tests/test/transpilation.js
View file
Open in desktop
Expand Up @@ -183,6 +183,18 @@ describe('transpilation', function () {
assert(file.includes('_jsxRuntime.jsx("div"'));
});

it('should support the automatic JSX runtime with preact with alias', async function () {
let b = await bundle(
path.join(
__dirname,
'/integration/jsx-automatic-preact-with-alias/index.js',
),
);

let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
assert(file.includes('_jsxRuntime.jsx("div"'));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should also add this to make sure it's actually importing from React (using a Regex because react/jsx-runtime is a substring of preact/jsx-runtime).

Suggested change
let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
assert(file.includes('_jsxRuntime.jsx("div"'));
let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
assert(/\Wreact\/jsx-runtime\W/.test(file));
assert(file.includes('_jsxRuntime.jsx("div"'));

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. I fixed in 4efec78 👍 Thanks!

});

it('should support the automatic JSX runtime with explicit tsconfig.json', async function () {
let b = await bundle(
path.join(__dirname, '/integration/jsx-automatic-tsconfig/index.js'),
Expand Down
12 changes: 8 additions & 4 deletions packages/transformers/js/src/JSTransformer.js
View file
Open in desktop
Expand Up @@ -200,11 +200,15 @@ export default (new Transformer({
jsxImportSource = compilerOptions?.jsxImportSource;
automaticJSXRuntime = true;
} else if (reactLib) {
let automaticVersion = JSX_PRAGMA[reactLib]?.automatic;
let effectiveReactLib =
pkg?.alias && pkg.alias['react'] === 'preact/compat'
? 'preact'
: reactLib;
let automaticVersion = JSX_PRAGMA[effectiveReactLib]?.automatic;
let reactLibVersion =
pkg?.dependencies?.[reactLib] ||
pkg?.devDependencies?.[reactLib] ||
pkg?.peerDependencies?.[reactLib];
pkg?.dependencies?.[effectiveReactLib] ||
pkg?.devDependencies?.[effectiveReactLib] ||
pkg?.peerDependencies?.[effectiveReactLib];
let minReactLibVersion =
reactLibVersion != null && reactLibVersion !== '*'
? semver.minVersion(reactLibVersion)?.toString()
Expand Down