Merge pull request #1908 from montagejs/features/demoHelloWorld

add basic demo/ directory with montage hello world
montagejs · Feb 28, 2018 · 4aa13cb · 4aa13cb
2 parents d308e68 + 6a4bd46
commit 4aa13cb
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 0 deletions.
diff --git a/demo/core/data.js b/demo/core/data.js
@@ -0,0 +1 @@
+module.exports = "This text was required from data.js!";
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+    <title>Montage demo</title>
+    <style type="text/css"> body { font-family: sans-serif; } </style>
+</head>
+<body>
+    <h1>Hello Montage</h1>
+    <script src="../montage.js"></script>
+    <script type="text/montage-serialization">
+    {
+        "app": {
+            "prototype": "montage/app.reel",
+            "values": {
+               "useFeature": false,
+               "endpointURL": "https://example.com"
+            }
+        },
+        "owner": {
+            "prototype": "montage/ui/loader.reel"
+        }
+    }
+    </script>
+</head>
+<body>
+    <span class="loading"></span>
+</body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "montage-demo",
+    "version": "1.0.0",
+    "dependencies": {
+        "montage": "*"
+    },
+     "mappings": {
+        "montage": "../"
+    }
+}
diff --git a/demo/ui/main.reel/main.css b/demo/ui/main.reel/main.css
@@ -0,0 +1,3 @@
+.Main {
+
+}
diff --git a/demo/ui/main.reel/main.html b/demo/ui/main.reel/main.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Montage Hello</title>
+    <link rel="stylesheet" href="main.css">
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "values": {
+                "element": {"#": "owner"}
+            }
+        },
+        "myData": {
+            "prototype": "montage/ui/text.reel",
+            "values": {
+                "element": {"#": "myData"},
+                "value": {"<-": "@owner.myData"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div data-montage-id="owner" class="Main">
+        <span data-montage-id="myData"></span>
+    </div>
+</body>
+</html>
diff --git a/demo/ui/main.reel/main.js b/demo/ui/main.reel/main.js
@@ -0,0 +1,23 @@
+/**
+ * @module "ui/main.reel"
+ */
+var Component = require("montage/ui/component").Component,
+    data = require('core/data');
+
+/**
+ * @class Main
+ * @extends Component
+ */
+exports.Main = Component.specialize(/** @lends Main.prototype */{
+	constructor: {
+        value: function Main() {
+            this.super();
+        }
+    },
+
+    myData: {
+        get: function() {
+            return data;
+        }
+    }
+});
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
   "scripts": {
     "test": "node test/run-node.js",
     "jsdoc": "jsdoc -c jsdoc.json",
+    "start:demo": "concurrently \"http-server -p 8084\" \"open http://localhost:8084/demo/\"",
     "integration": "MONTAGE_VERSION=${MONTAGE_VERSION:=./} MOP_VERSION=${MOP_VERSION:=#master} node node_modules/mop-integration/integration",
     "lint": "jshint .",
     "test:karma": "karma start --no-auto-watch --single-run",
@@ -94,6 +95,7 @@
     "test:jasmine": "concurrently \"http-server -p 8085\" \"open http://localhost:8085/test/run.html\""
   },
   "exclude": [
+    "demo",
     "report",
     "doc",
     "test",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = "This text was required from data.js!";