Skip to content

Commit

Permalink
enhance output target
Browse files Browse the repository at this point in the history
  • Loading branch information
christian-bromann committed Jul 8, 2024
1 parent f3a59a8 commit 4487df5
Show file tree
Hide file tree
Showing 16 changed files with 361 additions and 81,129 deletions.
20 changes: 10 additions & 10 deletions packages/example-project/component-library-react/src/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ type MyButtonEvents = {
onMyBlur: EventName<CustomEvent<void>>;
};

export const MyButton = createComponent<MyButtonElement, MyButtonEvents>({
export const MyButton = /*@__PURE__*/ createComponent<MyButtonElement, MyButtonEvents>({
tagName: 'my-button',
elementClass: MyButtonElement,
react: React,
Expand All @@ -75,7 +75,7 @@ type MyCheckboxEvents = {
onMyBlur: EventName<CustomEvent<void>>;
};

export const MyCheckbox = createComponent<MyCheckboxElement, MyCheckboxEvents>({
export const MyCheckbox = /*@__PURE__*/ createComponent<MyCheckboxElement, MyCheckboxEvents>({
tagName: 'my-checkbox',
elementClass: MyCheckboxElement,
react: React,
Expand All @@ -89,7 +89,7 @@ export const MyCheckbox = createComponent<MyCheckboxElement, MyCheckboxEvents>({

type MyComponentEvents = { onMyCustomEvent: EventName<CustomEvent<number>> };

export const MyComponent = createComponent<MyComponentElement, MyComponentEvents>({
export const MyComponent = /*@__PURE__*/ createComponent<MyComponentElement, MyComponentEvents>({
tagName: 'my-component',
elementClass: MyComponentElement,
react: React,
Expand All @@ -104,7 +104,7 @@ type MyInputEvents = {
onMyFocus: EventName<CustomEvent<void>>;
};

export const MyInput = createComponent<MyInputElement, MyInputEvents>({
export const MyInput = /*@__PURE__*/ createComponent<MyInputElement, MyInputEvents>({
tagName: 'my-input',
elementClass: MyInputElement,
react: React,
Expand All @@ -120,11 +120,11 @@ export const MyInput = createComponent<MyInputElement, MyInputEvents>({
type MyPopoverEvents = {
onMyPopoverDidPresent: EventName<CustomEvent<void>>;
onMyPopoverWillPresent: EventName<CustomEvent<void>>;
onMyPopoverWillDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail<any>>>;
onMyPopoverDidDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail<any>>>;
onMyPopoverWillDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail>>;
onMyPopoverDidDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail>>;
};

export const MyPopover = createComponent<MyPopoverElement, MyPopoverEvents>({
export const MyPopover = /*@__PURE__*/ createComponent<MyPopoverElement, MyPopoverEvents>({
tagName: 'my-popover',
elementClass: MyPopoverElement,
react: React,
Expand All @@ -143,7 +143,7 @@ type MyRadioEvents = {
onMySelect: EventName<CustomEvent<void>>;
};

export const MyRadio = createComponent<MyRadioElement, MyRadioEvents>({
export const MyRadio = /*@__PURE__*/ createComponent<MyRadioElement, MyRadioEvents>({
tagName: 'my-radio',
elementClass: MyRadioElement,
react: React,
Expand All @@ -157,7 +157,7 @@ export const MyRadio = createComponent<MyRadioElement, MyRadioEvents>({

type MyRadioGroupEvents = { onMyChange: EventName<MyRadioGroupCustomEvent<RadioGroupChangeEventDetail>> };

export const MyRadioGroup = createComponent<MyRadioGroupElement, MyRadioGroupEvents>({
export const MyRadioGroup = /*@__PURE__*/ createComponent<MyRadioGroupElement, MyRadioGroupEvents>({
tagName: 'my-radio-group',
elementClass: MyRadioGroupElement,
react: React,
Expand All @@ -171,7 +171,7 @@ type MyRangeEvents = {
onMyBlur: EventName<CustomEvent<void>>;
};

export const MyRange = createComponent<MyRangeElement, MyRangeEvents>({
export const MyRange = /*@__PURE__*/ createComponent<MyRangeElement, MyRangeEvents>({
tagName: 'my-range',
elementClass: MyRangeElement,
react: React,
Expand Down
8 changes: 8 additions & 0 deletions packages/example-project/component-library/stencil.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ export const config: Config = {
reactOutputTarget({
outDir: '../component-library-react/src',
}),
reactOutputTarget({
outDir: '../next-app/src/app',
hydrateModule: 'component-library/hydrate'
}),
vueOutputTarget({
componentCorePackage: 'component-library',
proxiesFile: '../component-library-vue/src/proxies.ts',
Expand All @@ -74,6 +78,10 @@ export const config: Config = {
type: 'dist',
esmLoaderPath: '../loader',
},
{
type: 'dist-hydrate-script',
dir: './hydrate',
},
{
type: 'docs-readme',
},
Expand Down
80,844 changes: 0 additions & 80,844 deletions packages/example-project/next-app/foo.txt

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ function Button() {
return (
<>
<MyButton
suppressHydrationWarning
onClick={(e) => {
e.preventDefault();
e.stopPropagation()
Expand Down
190 changes: 190 additions & 0 deletions packages/example-project/next-app/src/app/components.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
/**
* This file was automatically generated by the Stencil React Output Target.
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
*/

/* eslint-disable */

import type { EventName } from '@stencil/react-output-target/runtime';
import { createComponent, createComponentForServerSideRendering } from '@stencil/react-output-target/runtime';
import { type CheckboxChangeEventDetail, type InputChangeEventDetail, type MyCheckboxCustomEvent, type MyInputCustomEvent, type MyPopoverCustomEvent, type MyRadioGroupCustomEvent, type MyRangeCustomEvent, type OverlayEventDetail, type RadioGroupChangeEventDetail, type RangeChangeEventDetail } from "component-library";
import { MyButton as MyButtonElement, defineCustomElement as defineMyButton } from "component-library/components/my-button.js";
import { MyCheckbox as MyCheckboxElement, defineCustomElement as defineMyCheckbox } from "component-library/components/my-checkbox.js";
import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "component-library/components/my-component.js";
import { MyInput as MyInputElement, defineCustomElement as defineMyInput } from "component-library/components/my-input.js";
import { MyPopover as MyPopoverElement, defineCustomElement as defineMyPopover } from "component-library/components/my-popover.js";
import { MyRadioGroup as MyRadioGroupElement, defineCustomElement as defineMyRadioGroup } from "component-library/components/my-radio-group.js";
import { MyRadio as MyRadioElement, defineCustomElement as defineMyRadio } from "component-library/components/my-radio.js";
import { MyRange as MyRangeElement, defineCustomElement as defineMyRange } from "component-library/components/my-range.js";
import { renderToString } from "component-library/hydrate";
import React from 'react';

type MyButtonEvents = {
onMyFocus: EventName<CustomEvent<void>>,
onMyBlur: EventName<CustomEvent<void>>
};

export const MyButton = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyButtonElement, MyButtonEvents>({
tagName: 'my-button',
elementClass: MyButtonElement,
react: React,
events: {
onMyFocus: 'myFocus',
onMyBlur: 'myBlur'
} as MyButtonEvents,
defineCustomElement: defineMyButton
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyButtonElement, MyButtonEvents>({
tagName: 'my-button',
renderToString,
});

type MyCheckboxEvents = {
onMyChange: EventName<MyCheckboxCustomEvent<CheckboxChangeEventDetail>>,
onMyFocus: EventName<CustomEvent<void>>,
onMyBlur: EventName<CustomEvent<void>>
};

export const MyCheckbox = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyCheckboxElement, MyCheckboxEvents>({
tagName: 'my-checkbox',
elementClass: MyCheckboxElement,
react: React,
events: {
onMyChange: 'myChange',
onMyFocus: 'myFocus',
onMyBlur: 'myBlur'
} as MyCheckboxEvents,
defineCustomElement: defineMyCheckbox
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyCheckboxElement, MyCheckboxEvents>({
tagName: 'my-checkbox',
renderToString,
});

type MyComponentEvents = { onMyCustomEvent: EventName<CustomEvent<number>> };

export const MyComponent = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyComponentElement, MyComponentEvents>({
tagName: 'my-component',
elementClass: MyComponentElement,
react: React,
events: { onMyCustomEvent: 'myCustomEvent' } as MyComponentEvents,
defineCustomElement: defineMyComponent
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyComponentElement, MyComponentEvents>({
tagName: 'my-component',
renderToString,
});

type MyInputEvents = {
onMyInput: EventName<MyInputCustomEvent<KeyboardEvent>>,
onMyChange: EventName<MyInputCustomEvent<InputChangeEventDetail>>,
onMyBlur: EventName<CustomEvent<void>>,
onMyFocus: EventName<CustomEvent<void>>
};

export const MyInput = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyInputElement, MyInputEvents>({
tagName: 'my-input',
elementClass: MyInputElement,
react: React,
events: {
onMyInput: 'myInput',
onMyChange: 'myChange',
onMyBlur: 'myBlur',
onMyFocus: 'myFocus'
} as MyInputEvents,
defineCustomElement: defineMyInput
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyInputElement, MyInputEvents>({
tagName: 'my-input',
renderToString,
});

type MyPopoverEvents = {
onMyPopoverDidPresent: EventName<CustomEvent<void>>,
onMyPopoverWillPresent: EventName<CustomEvent<void>>,
onMyPopoverWillDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail>>,
onMyPopoverDidDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail>>
};

export const MyPopover = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyPopoverElement, MyPopoverEvents>({
tagName: 'my-popover',
elementClass: MyPopoverElement,
react: React,
events: {
onMyPopoverDidPresent: 'myPopoverDidPresent',
onMyPopoverWillPresent: 'myPopoverWillPresent',
onMyPopoverWillDismiss: 'myPopoverWillDismiss',
onMyPopoverDidDismiss: 'myPopoverDidDismiss'
} as MyPopoverEvents,
defineCustomElement: defineMyPopover
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyPopoverElement, MyPopoverEvents>({
tagName: 'my-popover',
renderToString,
});

type MyRadioEvents = {
onMyFocus: EventName<CustomEvent<void>>,
onMyBlur: EventName<CustomEvent<void>>,
onMySelect: EventName<CustomEvent<void>>
};

export const MyRadio = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyRadioElement, MyRadioEvents>({
tagName: 'my-radio',
elementClass: MyRadioElement,
react: React,
events: {
onMyFocus: 'myFocus',
onMyBlur: 'myBlur',
onMySelect: 'mySelect'
} as MyRadioEvents,
defineCustomElement: defineMyRadio
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyRadioElement, MyRadioEvents>({
tagName: 'my-radio',
renderToString,
});

type MyRadioGroupEvents = { onMyChange: EventName<MyRadioGroupCustomEvent<RadioGroupChangeEventDetail>> };

export const MyRadioGroup = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyRadioGroupElement, MyRadioGroupEvents>({
tagName: 'my-radio-group',
elementClass: MyRadioGroupElement,
react: React,
events: { onMyChange: 'myChange' } as MyRadioGroupEvents,
defineCustomElement: defineMyRadioGroup
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyRadioGroupElement, MyRadioGroupEvents>({
tagName: 'my-radio-group',
renderToString,
});

type MyRangeEvents = {
onMyChange: EventName<MyRangeCustomEvent<RangeChangeEventDetail>>,
onMyFocus: EventName<CustomEvent<void>>,
onMyBlur: EventName<CustomEvent<void>>
};

export const MyRange = typeof window !== 'undefined'
? /*@__PURE__*/ createComponent<MyRangeElement, MyRangeEvents>({
tagName: 'my-range',
elementClass: MyRangeElement,
react: React,
events: {
onMyChange: 'myChange',
onMyFocus: 'myFocus',
onMyBlur: 'myBlur'
} as MyRangeEvents,
defineCustomElement: defineMyRange
})
: /*@__PURE__*/ createComponentForServerSideRendering<MyRangeElement, MyRangeEvents>({
tagName: 'my-range',
renderToString,
});
Loading

0 comments on commit 4487df5

Please sign in to comment.