-
Notifications
You must be signed in to change notification settings - Fork 578
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: improve parseJSX to resolve complex useMetadata * fix: issue with metadata always be flat without correct depth * chore: add changeset * chore: add example for complex useMetadata * chore: run fmt * fix: complex metadata with spread variable * chore: run fmt * chore: update snapshots * chore: moved `isTypescriptFile` from `src/helpers` to `parsers/jsx/helpers` * chore: update snapshots
- Loading branch information
Showing
57 changed files
with
6,713 additions
and
507 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| --- | ||
| '@builder.io/mitosis': patch | ||
| --- | ||
|
|
||
| [All] Refactored `useMetadata` hook to enable import resolution instead of simple `JSON5` parsing. | ||
|
|
||
| You could use a normal JS `Object` and import it inside your `*.lite.tsx` file like this: | ||
|
|
||
| ```ts | ||
| // data.ts | ||
|
|
||
| export const myMetadata: Record<string, string | number> = { | ||
| a: 'b', | ||
| c: 1, | ||
| }; | ||
| ``` | ||
|
|
||
| ```tsx | ||
| // my-button.lite.tsx | ||
| import { useMetadata } from '@builder.io/mitosis'; | ||
| import { myMetadata } from './data.ts'; | ||
|
|
||
| useMetadata({ | ||
| x: 'y', | ||
| my: myMetadata, | ||
| }); | ||
|
|
||
| export default function MyButton() { | ||
| return <button></button>; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| module.exports = { | ||
| env: { | ||
| browser: true, | ||
| }, | ||
| plugins: ["@builder.io/mitosis"], | ||
| parser: "@typescript-eslint/parser", | ||
| extends: [], | ||
| parserOptions: { | ||
| ecmaVersion: 2018, | ||
| sourceType: "module", | ||
| ecmaFeatures: { | ||
| jsx: true, | ||
| }, | ||
| }, | ||
| rules: { | ||
| "@builder.io/mitosis/no-conditional-render": "warn", | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| output |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # Metadata example for Mitosis | ||
|
|
||
| This is an example to showcase the ``useMetadata`` hook. You can use this to set predefined configuration parameters for each component. Or you can add additional parameters to use them in a plugin. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| const metadataPlugin = () => ({ | ||
| code: { | ||
| pre: (code, json) => { | ||
| if (json.meta.useMetadata) { | ||
| return ` | ||
| /** | ||
| useMetadata: | ||
| ${JSON.stringify(json.meta.useMetadata)} | ||
| */ | ||
| ${code}`; | ||
| } | ||
|
|
||
| return code; | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| module.exports = { | ||
| files: 'src/**', | ||
| commonOptions: { | ||
| plugins: [metadataPlugin], | ||
| }, | ||
| targets: [ | ||
| 'react', | ||
| // still unsupported | ||
| // 'qwik', | ||
| // 'builder', | ||
| 'vue', | ||
| 'html', | ||
| // TO-DO: fix error causing svelte output not to work | ||
| // 'svelte', | ||
| 'solid', | ||
| 'angular', | ||
| 'webcomponent', | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| { | ||
| "name": "@builder.io/metadata-example", | ||
| "private": true, | ||
| "scripts": { | ||
| "build": "mitosis build", | ||
| "lint": "eslint" | ||
| }, | ||
| "exports": { | ||
| "./react/*": "./dist/react/src/*", | ||
| "./qwik/*": "./dist/qwik/src/*", | ||
| "./vue/*": "./dist/vue/src/*", | ||
| "./svelte/*": "./dist/svelte/src/*", | ||
| "./angular/*": "./dist/angular/src/*", | ||
| "./html/*": "./dist/html/src/*", | ||
| "./solid/*": "./dist/solid/src/*" | ||
| }, | ||
| "dependencies": { | ||
| "@builder.io/mitosis": "workspace:*", | ||
| "@builder.io/mitosis-cli": "workspace:*", | ||
| "eslint": "^7.21.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { ComponentMetadata } from '@builder.io/mitosis'; | ||
| import { customMetaData } from '../shared/data'; | ||
|
|
||
| export const metadata: ComponentMetadata = { | ||
| regularKey: 'abc', | ||
| 'some-key': customMetaData, | ||
| react: { | ||
| forwardRef: 'xxx', | ||
| }, | ||
| vue: { | ||
| customKey: 'yyy', | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { useMetadata } from '@builder.io/mitosis'; | ||
| import { metadata } from './data'; | ||
|
|
||
| useMetadata({ ...metadata }); | ||
|
|
||
| export default function MetadataExample() { | ||
| return <div>Metadata</div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { CustomMetadata } from './model'; | ||
|
|
||
| export const customMetaData: CustomMetadata = { | ||
| a: 'custom', | ||
| b: 1, | ||
| c: { | ||
| d: 'nested', | ||
| }, | ||
| }; | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export type CustomMetadata = { | ||
| a: string; | ||
| b: number; | ||
| c: Object; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ESNext", | ||
| "strict": true, | ||
| "jsx": "preserve", | ||
| "moduleResolution": "node", | ||
| "jsxImportSource": "@builder.io/mitosis" | ||
| }, | ||
| "include": ["src"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.