wccode-demo

v2.0.0

Published

2 years ago

Create a playground to show demos of your projects.

Downloads

0High
0Medium
0Low

jinxiaoman

基于: demosify 项目,稍微修改了一下,增加了三级目录.节点过滤

fix: 重复路由点击报错(vue router ≥ v3.1 后，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台警告程序卡死)

1.0.0 支持无限嵌套，部分代码优化。

{
  "label": "framework2",
  "src": "framework2",
  "children": [
    {
      "label": "Vue2",
      "src": "vue22",
      "children": [
        {
          "label": "vue222",
          "src": "vue222"
        }
      ]
    },
    {
      "label": "React2",
      "src": "react test2"
    }
  ]
}

👉🏻 website | 👉🏻 online demo

DEMOSIFY

Create a playground to show the demos of your project.

Quick start

install wccode-demo

npm install wccode-demo --save-dev

Create .demosrc.js file in your project root.

module.exports = {
  name: 'YOUR PROJECT NAME',
}

Create demos directory in your project root. Add your demos in demos directory.

mkdir demos
mkdir demos/demo1

Create a config.js file in each of your demos, e.g. demos/demo1.

// config.js
const javascript = `console.log('this is a demo')`;

export default {
  javascript,
}

Create a .demoList.json file in your demos directory. Specify all your demos show in sidebar.

[
  "demo1",
  // ...
]

多级,三级

[
  {
    "label": "RawData",
    "src": "rawdata test"
  },
  {
    "group":"framework",
    "label": "framework",
    "src": "framework",
    "demos": [
      {
        "label": "Vue",
        "src": "vue test"
      },
      {
        "label": "React",
        "src": "react test"
      },
      {
        "group":"framework2",
        "label": "framework2",
        "src": "framework2",
        "demos": [
          {
            "label": "Vue2",
            "src": "vue test2"
          },
          {
            "label": "React2",
            "src": "react test2"
          }
        ]
      }
    ]
  }
]

Add NPM scripts in your package.json:

  "scripts": {
    "demo:dev": "demosify --serve",
    "demo:prod": "demosify --prod"
  }

Run npm run demo:dev, visit http://localhost:3030. You will see the playground. ✌🏻

Load sample files

You can load sample files though config.js.

export default async () => {
  const [javascript, html, css] = await Promise.all([
    import('!raw-loader!./index.js'),
    import('!raw-loader!./index.html'),
    import('!raw-loader!./style.css'),
  ]);

  return {
    javascript,
    html,
    css,
  }
}

Add index.js, index.html and style.css files in your demo directory.

console.log('This is a demo.');

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DEMO</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

/* demo stylesheet */

body {
  background-color: red;
}

These files will be loaded to your playground.

Deploy

Run npm run demo:prod.

All the demos will be deploy to production into dist directory of your project.

Thanks to

Special thanks to Poi.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

DEMOSIFY

Quick start

Load sample files

Deploy

Thanks to