varlet-schema: A TypeScript repository from varletjs

Intro

Varlet Schema is a Lightweight Schema renderer based on Vue3, developed and maintained by varletjs community team.

Install

# Install with npm or yarn or pnpm

# npm
npm i @varlet/schema-renderer -S

# yarn
yarn add @varlet/schema-renderer

# pnpm
pnpm add @varlet/schema-renderer

Basic Usage

Inject eval in index.html

Schema rendering uses eval. Eval is not allowed to be used in strict mode, but script module is in strict mode. So we have to do the following.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Varlet Schema Playground</title>
    <script src="https://cdn.jsdelivr.net/npm/@varlet/schema-eval-with/index.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

Basic Usage

<script setup lang="ts">
import { Button, Snackbar } from '@varlet/ui'
import { SchemaRenderer, type SchemaPageNode } from '@varlet/schema-renderer'
import { shallowRef } from 'vue'

const components = shallowRef({
  Button,
})

const injects = shallowRef({
  Snackbar
})

const schema = shallowRef<SchemaPageNode>({
  name: 'Page',
  code: `\
function setup() {
  const count = ref(0)

  onMounted(() => {
    Snackbar('hello')
  })

   function handleClick() {
    count.value++
  }

  return { count, handleClick }
}\
`,
  children: [
    {
      name: 'Button',
      props: {
        onClick: {
          type: 'Expression',
          value: 'handleClick'
        }
      },
      children: [
        {
          name: 'Text',
          value: {
            type: 'Expression',
            value: 'count.value'
          }
        }
      ]
    }
  ]
})
</script>

<template>
  <schema-renderer :components="components" :injects="injects" :schema="schema" />
</template>