examples.md

Examples

File auto-generated by generateExamples.ts

Data

<template>
  <div>
    <Foo :foo="foo" />
    <Bar>{{ bar }}</Bar>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data: {
    foo: 10,
    bar: 20,
  },
});
</script>

import { useState } from "react";
import React from "react";
export default () => {
  const [foo, setFoo] = useState(10);
  const [bar, setBar] = useState(20);
  return (
    <div>
      <Foo foo={foo}></Foo> <Bar>{bar}</Bar>
    </div>
  );
};

Empty

import React from "react";
export default () => {
  return <></>;
};

TemplateMoustache

<template>
  <ul>
    <li>{{ 10 }}</li>
    <li>{{ "hello" }}</li>
    <li>{{ 10 + 20 }}</li>
  </ul>
</template>

import React from "react";
export default () => {
  return (
    <ul>
      <li>{10}</li> <li>{"hello"}</li> <li>{10 + 20}</li>
    </ul>
  );
};

TemplateNestedHtml

<template>
  <ul>
    <li>hello</li>
    <li>world</li>
  </ul>
</template>

import React from "react";
export default () => {
  return (
    <ul>
      <li>hello</li> <li>world</li>
    </ul>
  );
};

TemplateProps

<template>
  <Foo someString="bar" :someNumber="10" :someExpression="10 + 20" />
</template>

import React from "react";
export default () => {
  return <Foo someString="bar" someNumber={10} someExpression={10 + 20}></Foo>;
};

TemplateSimpleHtml

<template>
  <div>Hello</div>
</template>

import React from "react";
export default () => {
  return <div>Hello</div>;
};