add samples directory for creating sample playgrounds (wip)

Author: rigor789

build/build-samples.js

@@ -0,0 +1,21 @@
+const path = require('path');
+const fs = require('fs');
+const {parseComponent} = require('vue-template-compiler');
+
+const samplesPath = path.resolve(__dirname, '../samples');
+const files = fs.readdirSync(samplesPath);
+
+const samples = files.filter(file => file.endsWith('.vue')).map((name) => {
+  const contents = fs.readFileSync(path.resolve(samplesPath, name));
+  const sfc = parseComponent(contents.toString());
+  return {
+    name: name.replace('.vue', ''),
+    files: [
+      {key: 'app.js', contents: sfc.script.content},
+      {key: 'app.css', contents: sfc.styles[0].content},
+    ]
+  }
+});
+
+const out = path.resolve(__dirname, '../static/samples.json');
+fs.writeFileSync(out, JSON.stringify(samples, null, 2));

package.json

@@ -7,7 +7,8 @@
     "dev": "node build/index.js --dev",
     "build": "node build/index.js",
     "build:css": "tailwind build src/styles.css -c ./tailwind.js -o static/styles.css",
-    "build:js": "babel src -d static"
+    "build:js": "babel src -d static",
+    "build:samples": "node build/build-samples.js"
   },
   "keywords": [],
   "author": "Igor Randjelovic",
@@ -47,6 +48,7 @@
     "remark-squeeze-paragraphs": "^3.0.1",
     "table-of-contents-json": "^1.2.0",
     "tailwindcss": "^0.4.0",
-    "vfile-reporter": "^4.0.0"
+    "vfile-reporter": "^4.0.0",
+    "vue-template-compiler": "^2.5.13"
   }
 }

samples/absolute-layout-grid.vue

@@ -0,0 +1,36 @@
+<script>
+const Vue = require("./nativescript-vue");
+
+new Vue({
+    template: `
+        <AbsoluteLayout backgroundColor="#3c495e">
+            <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#43b883"/>
+            <Label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#43b883"/>
+            <Label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#43b883"/>
+            <Label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#43b883"/>
+        </AbsoluteLayout>
+    `,
+}).$start();
+</script>
+
+<style>
+/*
+In NativeScript, the app.css file is where you place CSS rules that
+you would like to apply to your entire application. Check out
+http://docs.nativescript.org/ui/styling for a full list of the CSS
+selectors and properties you can use to style UI components.
+
+/*
+In many cases you may want to use the NativeScript core theme instead
+of writing your own CSS rules. For a full list of class names in the theme
+refer to http://docs.nativescript.org/ui/theme.
+The imported CSS rules must precede all other types of rules.
+*/
+@import 'nativescript-theme-core/css/core.light.css';
+
+label {
+    font-size: 15;
+    padding: 10;
+    color: white;
+}
+</style>

static/samples.json

@@ -0,0 +1,15 @@
+[
+  {
+    "name": "absolute-layout-grid",
+    "files": [
+      {
+        "key": "app.js",
+        "contents": "\nconst Vue = require(\"./nativescript-vue\");\n\nnew Vue({\n    template: `\n        <AbsoluteLayout backgroundColor=\"#3c495e\">\n            <Label text=\"10,10\" left=\"10\" top=\"10\" width=\"100\" height=\"100\" backgroundColor=\"#43b883\"/>\n            <Label text=\"120,10\" left=\"120\" top=\"10\" width=\"100\" height=\"100\" backgroundColor=\"#43b883\"/>\n            <Label text=\"10,120\" left=\"10\" top=\"120\" width=\"100\" height=\"100\" backgroundColor=\"#43b883\"/>\n            <Label text=\"120,120\" left=\"120\" top=\"120\" width=\"100\" height=\"100\" backgroundColor=\"#43b883\"/>\n        </AbsoluteLayout>\n    `,\n}).$start();\n"
+      },
+      {
+        "key": "app.css",
+        "contents": "\n/*\nIn NativeScript, the app.css file is where you place CSS rules that\nyou would like to apply to your entire application. Check out\nhttp://docs.nativescript.org/ui/styling for a full list of the CSS\nselectors and properties you can use to style UI components.\n\n/*\nIn many cases you may want to use the NativeScript core theme instead\nof writing your own CSS rules. For a full list of class names in the theme\nrefer to http://docs.nativescript.org/ui/theme.\nThe imported CSS rules must precede all other types of rules.\n*/\n@import 'nativescript-theme-core/css/core.light.css';\n\nlabel {\n    font-size: 15;\n    padding: 10;\n    color: white;\n}\n"
+      }
+    ]
+  }
+]