🎡

QingWei-Li · Dec 25, 2016 · 70b6f0b · 70b6f0b
1 parent d6302ea
commit 70b6f0b
Show file tree

Hide file tree

Showing 19 changed files with 1,634 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,49 @@
-# vue-playground
+# Vuep (vue playground)
+
+> 🎡 A component for rendering Vue components with live editor and preview.
+
+**Need the full (compiler-included) CommonJS build of Vue**
+
+
+![image](https://cloud.githubusercontent.com/assets/7565692/21471084/f391823e-cade-11e6-9de5-df9455bc50cb.png)
 
-> A component for rendering Vue components with live editor and preview.
 
 ## Installation
 
+### Yarn
 ```bash
-yarn add vue-playground
-# npm i vue-playground -S
+yarn add vuep codemirror
+# npm i vuep codemirror -S
+```
+
+### HTML tag
+
+```html
+<!-- Import theme -->
+<link rel="stylesheet" href="//unpkg.com/vuep.css">
+
+<!-- depend vue -->
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vuep"></script>
 ```
 
 ## Quick start
 
+webpack config
+```javascript
+{
+  alias: {
+    'vue$': 'vue/dist/vue.common'
+  }
+}
+```
+
 ```javascript
 import Vue from 'vue'
-import VuePlayground from 'vue-playground'
+import Vuep from 'vuep'
 
-Vue.use(Playground)
-// or Vue.component('VuePlayground', Playground)
+Vue.use(Vuep {, /* codemirror options */ })
+// or Vue.component('Vuep', Vuep)
 
 new Vue({
   el: '#app',
@@ -43,7 +70,7 @@ new Vue({
 ### Usage A
 ```html
 <div id="app">
-  <vue-playground :template="code"></vue-playground>
+  <vuep :template="code"></vuep>
 </div>
 ```
 
@@ -52,7 +79,7 @@ you can written in HTML file or even the Markdown file.
 
 ```html
 <div id="app">
-  <vue-playground template="#example"></vue-playground>
+  <vuep template="#example"></vuep>
 </div>
 
 <script type="text/x-template" id="example">
@@ -74,5 +101,30 @@ you can written in HTML file or even the Markdown file.
 - https://facebook.github.io/react/
 - https://github.com/FormidableLabs/component-playground
 
+
+## Roadmap
+
+- More usages
+- Unit test
+- Supports style tag
+
+
+## Contributing
+
+- Fork it!
+- Create your feature branch: `git checkout -b my-new-feature`
+- Commit your changes: `git commit -am 'Add some feature'`
+- Push to the branch: `git push origin my-new-feature`
+- Submit a pull request :D
+
+
+## Development
+
+```shell
+npm i && npm run dev
+open test/test.html
+```
+
 ## LICENSE
 MIT
+
diff --git a/build/build-css.js b/build/build-css.js
@@ -0,0 +1,30 @@
+var fs = require('fs')
+var cssnano = require('cssnano').process
+var resolve = require('path').resolve
+var postcss = require('postcss')
+
+var file = 'vuep.css'
+var processor = postcss([require('postcss-salad')])
+
+var save = function (file, content) {
+  fs.writeFileSync(resolve(__dirname, '../dist/', file), content)
+}
+var load = function (file) {
+  return fs.readFileSync(resolve(__dirname, '../src/style/', file)).toString()
+}
+var loadDist = function (file) {
+  return fs.readFileSync(resolve(__dirname, '../dist/', file)).toString()
+}
+
+processor.process(load(file), { from: resolve(__dirname, '../src/style/', file) })
+  .then(function (result) {
+    save(file, result.css)
+    console.log('salad - ' + file)
+    cssnano(loadDist(file))
+      .then(function (result) {
+        save('vuep.min.css', result.css)
+        console.log('cssnao - ' + file)
+      })
+  }).catch(function (err) {
+    console.log(err)
+  })
diff --git a/build/build.js b/build/build.js
@@ -0,0 +1,51 @@
+var rollup = require('rollup')
+var buble = require('rollup-plugin-buble')
+var commonjs = require('rollup-plugin-commonjs')
+var nodeResolve = require('rollup-plugin-node-resolve')
+var uglify = require('rollup-plugin-uglify')
+
+var build = function (opts) {
+  rollup
+    .rollup({
+      entry: 'src/' + opts.entry,
+      plugins: [buble(), commonjs(), nodeResolve()].concat(opts.plugins || []),
+      external: opts.external
+    })
+    .then(function (bundle) {
+      var dest = 'dist/' + (opts.output || opts.entry)
+
+      console.log(dest)
+      bundle.write({
+        format: opts.format || 'umd',
+        moduleName: opts.moduleName || 'Vuep',
+        globals: {
+          codemirror: 'CodeMirror',
+          'vue/dist/vue.common': 'Vue'
+        },
+        dest: dest
+      })
+    })
+    .catch(function (err) {
+      console.error(err)
+    })
+}
+
+build({
+  entry: 'index.umd.js',
+  output: 'vuep.js',
+  external: ['vue/dist/vue.common']
+})
+
+build({
+  entry: 'index.umd.js',
+  output: 'vuep.min.js',
+  plugins: [uglify()],
+  external: ['vue/dist/vue.common']
+})
+
+build({
+  entry: 'index.js',
+  output: 'vuep.common.js',
+  format: 'cjs',
+  external: ['codemirror', 'vue/dist/vue.common']
+})
diff --git a/rollup.config.js → build/watch.js b/rollup.config.js → build/watch.js
@@ -5,12 +5,12 @@ import buble from 'rollup-plugin-buble'
 export default {
   entry: 'src/index.js',
   plugins: [buble(), commonjs(), nodeResolve()],
-  dest: 'dist/vue-playground.js',
+  dest: 'dist/vuep.js',
   format: 'umd',
-  moduleName: 'VuePlayground',
-  external: ['codemirror', 'vue'],
+  moduleName: 'Vuep',
+  external: ['codemirror', 'vue/dist/vue.common'],
   globals: {
     codemirror: 'CodeMirror',
-    vue: 'Vue'
+    'vue/dist/vue.common': 'Vue'
   }
 }
diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,116 @@
+# Demo
+<vuep template="#demo1"></vuep>
+
+<script type="text/x-template" id="demo1">
+<template>
+  <div>Hello, {{ name }}!</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return { name: 'Vue' }
+    }
+  }
+</script>
+</script>
+
+
+<br>
+# Usage
+
+## CommonJS
+**Need the full (compiler-included) CommonJS build of Vue**
+
+webpack config
+```javascript
+{
+  alias: {
+    'vue$': 'vue/dist/vue.common'
+  }
+}
+```
+
+```javascript
+import Vue from 'vue'
+import Vuep from 'vuep'
+
+Vue.use(Vuep {, /* codemirror options */ })
+// or Vue.component('Vuep', Vuep)
+
+new Vue({
+  el: '#app',
+
+  created: function () {
+    this.code = `
+      <template>
+        <div>Hello, {{ name }}!</div>
+      </template>
+
+      <script>
+        export default {
+          data: function () {
+            return { name: 'Vue' }
+          }
+        }
+      </script>
+    `
+  }
+})
+```
+
+template
+```html
+<div id="app">
+  <vuep :template="code"></vuep>
+</div>
+```
+
+## UMD
+
+index.html
+```html
+<!-- Import theme -->
+<link rel="stylesheet" href="//unpkg.com/vuep.css">
+
+<!-- depend vue -->
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vuep"></script>
+```
+
+template
+```html
+<vuep template="#example"></vuep>
+
+<script type="text/x-template" id="example">
+  <template>
+    <div>Hello, {{ name }}!</div>
+  </template>
+
+  <script>
+    export default {
+      data: function () {
+        return { name: 'Vue' }
+      }
+    }
+  </script>
+</script>
+```
+
+# Options
+
+https://codemirror.net/index.html
+
+```javascript
+Vue.use(Vuep, { /* codemirror config */ })
+```
+
+Default config
+```json
+{
+  "lineNumbers": true,
+  "mode": "text/x-vue",
+  "theme": "material",
+  "tabSize": 2
+}
+```
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
@@ -0,0 +1,8 @@
+
+# Vuep <small>0.1.0</small>
+
+> A component for rendering Vue components with live editor and preview.
+
+
+[GitHub](https://github.com/QingWei-Li/vuep/)
+[Get Started](#demo)
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vuep - A component for rendering Vue components with live editor and preview.</title>
+  <meta name="description" content="A component for rendering Vue components with live editor and preview.">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+  <link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
+<script
+  src="//unpkg.com/docsify/lib/docsify.min.js"
+  data-sidebar-toggle
+  data-coverpage
+  data-router></script>
+</html>