Merge branch 'main' into korey/support-localization

examples/metdata/.eslintrc.js

@@ -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",
+  },
+};

examples/metdata/.gitignore

@@ -0,0 +1 @@
+output

examples/metdata/README.md

@@ -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.

examples/metdata/mitosis.config.js

@@ -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',
+  ],
+};

examples/metdata/package.json

@@ -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"
+  }
+}

examples/metdata/src/components/data.ts

@@ -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',
+  },
+};

examples/metdata/src/components/metadata.lite.tsx

@@ -0,0 +1,8 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { metadata } from './data';
+
+useMetadata({ ...metadata });
+
+export default function MetadataExample() {
+  return <div>Metadata</div>;
+}

examples/metdata/src/shared/data.ts

@@ -0,0 +1,11 @@
+import { CustomMetadata } from './model';
+
+export const customMetaData: CustomMetadata = {
+  a: 'custom',
+  b: 1,
+  c: {
+    d: 'nested',
+  },
+};
+
+

examples/metdata/src/shared/model.ts

@@ -0,0 +1,5 @@
+export type CustomMetadata = {
+  a: string;
+  b: number;
+  c: Object;
+};

examples/metdata/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "jsxImportSource": "@builder.io/mitosis"
+  },
+  "include": ["src"]
+}

packages/cli/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @builder.io/mitosis-cli
 
+## 0.5.27
+
+### Patch Changes
+
+- 92ad2c6: Misc: stop using `fs-extra-promise` dependency
+- Updated dependencies [92ad2c6]
+  - @builder.io/[email protected]
+
+## 0.5.26
+
+### Patch Changes
+
+- Updated dependencies [57bdffe]
+  - @builder.io/[email protected]
+
+## 0.5.25
+
+### Patch Changes
+
+- Updated dependencies [af43f50]
+- Updated dependencies [20ad8dc]
+  - @builder.io/[email protected]
+
 ## 0.5.24
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.5.24",
+  "version": "0.5.27",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {

packages/core/CHANGELOG.md

@@ -1,5 +1,77 @@
 # Change Log
 
+## 0.5.27
+
+### Patch Changes
+
+- 92ad2c6: Misc: stop using `fs-extra-promise` dependency
+
+## 0.5.26
+
+### Patch Changes
+
+- 57bdffe: [angular] fix issue with definite assignment (!) for props with defaultProps
+
+## 0.5.25
+
+### Patch Changes
+
+- af43f50: [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>;
+  }
+  ```
+
+- 20ad8dc: [angular]: Fix issue with events forced to become `toLowerCase()`.
+
+  Based on [choosing-event-names](https://angular.dev/guide/components/outputs#choosing-event-names) custom events are camelCase.
+  [DOM events](https://www.w3schools.com/jsref/dom_obj_event.asp) are always lower-cased for Angular components.
+
+  Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) for a list of all events that are automatically lower-cased. Everything else will be treated as a custom event and therefore camelCased.
+
+  If you need some other event to be lower-cased you can use `useMetadata.angular.nativeEvents`:
+
+  ```tsx
+  import { useMetadata } from '@builder.io/mitosis';
+
+  useMetadata({
+    angular: {
+      nativeEvents: ['onNativeEvent'],
+    },
+  });
+
+  export default function MyComponent(props) {
+    return (
+      <div>
+        <input onNativeEvent={(event) => console.log(event)} />
+        Hello!
+      </div>
+    );
+  }
+  ```
+
 ## 0.5.24
 
 ### Patch Changes

packages/core/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.24",
+  "version": "0.5.27",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
@@ -86,7 +86,6 @@
     "@types/babel__core": "7.1.14",
     "@types/dedent": "^0.7.0",
     "@types/estree": "^1.0.2",
-    "@types/fs-extra-promise": "^1.0.10",
     "@types/hash-sum": "^1.0.0",
     "@types/json5": "0.0.30",
     "@types/lodash": "^4.14.165",
@@ -95,7 +94,6 @@
     "@types/prettier": "^2.1.5",
     "@types/rollup__plugin-virtual": "^2.0.1",
     "concurrently": "^8.2.2",
-    "fs-extra-promise": "^1.0.1",
     "rimraf": "^5.0.5",
     "rollup": "^2.70.1",
     "strip-ansi": "^6.0.1",