Framer X Stencil integration

stencil.config.js

// Using "@stencil/core": "0.14.1"

exports.config = {
  namespace: 'CustomComponents',
  bundles: [
    {
      components: [ 'text-field' ]
    }
  ],
  outputTargets: [
    {
      type: 'dist'
    }, {
      type: 'www',
      indexHtml: './index.html'
    }
  ]
}

text-field.tsx

import { Component, Prop } from '@stencil/core';

@Component({ tag: 'text-field' })
export class TextField {
  @Prop()
  public text: string;

  public render() {
    return (
      <div>
        { this.text }
      </div>
    );
  }
}

TextField.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { defineCustomElements } from "stencil-component/dist/loader";

const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#8855FF",
    background: "rgba(136, 85, 255, 0.1)",
    overflow: "hidden",
};

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'text-field': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & Props, HTMLElement>;
        }
    }
}

// Define type of property
interface Props {
    text: string;
}

export class TextField extends React.Component<Props> {

    // Set default properties
    static defaultProps = {
        text: "Hello World!"
    }

    // Items shown in property panel
    static propertyControls: PropertyControls<Props> = {
        text: { type: ControlType.String, title: "Text" },
    }

    render() {
        return (
            <div style={ style }>
                <text-field text={ this.props.text }></text-field>
            </div>
        );
    }
}

defineCustomElements(window);