Initial commit v.4.22

.gitignore

@@ -0,0 +1,25 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Coverage directory used by tools like istanbul
+.nyc_output/
+coverage/
+
+node_modules
+
+### JetBrains template
+.idea/
+*.iml
+*.iws
+
+# lasso/marko/ts
+static/
+.beans/
+.cache/
+*.map
+*.marko.js
+dist/

.npmignore

@@ -0,0 +1,20 @@
+### JetBrains template
+.idea/
+*.iws
+
+### Node template
+*.log
+
+# Dependency directories
+node_modules/
+
+# lasso/marko/ts
+static/
+.beans/
+.cache/
+*.map
+*.marko.js
+
+.nycrc
+.nyc_output/
+coverage/

.nvmrc

@@ -0,0 +1 @@
+v6.12.1

.nycrc

@@ -0,0 +1,21 @@
+{
+  "extension": [
+    ".ts"
+  ],
+  "require": [
+    "ts-node/register"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.d.ts",
+    "src/logging.ts",
+    "src/server-config.ts",
+    "src/start-server.ts"
+  ],
+  "reporter": [
+    "html"
+  ],
+  "all": true
+}

LICENSE.txt

@@ -0,0 +1,11 @@
+The MIT License
+SPDX short identifier: MIT
+
+Further resources on the MIT License
+Copyright 2018 eBay Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,147 @@
+# marko-playground
+
+This project is a development utility for Marko UI components. On launch, it automatically detects all components in your Marko application and allows you to browse through them, rendering all declared use cases or states. 
+Scenarios can be written in fixtures that represent the backend responses or props from the parent component.
+As a result, component development becomes way faster, regression testing easier and visual defects can be spotted early.
+
+![Marko Playground screenshot](https://user-images.githubusercontent.com/2737310/44096771-5c383430-9fdc-11e8-84fa-4d150f336bab.png)
+
+## Getting started
+
+First, add marko-playground to your project by running the following command:
+
+```bash
+yarn add --dev marko-playground
+#or
+npm i --save-dev marko-playground
+```
+
+Now you can start the playground via
+
+```bash
+yarn marko-playground
+#or
+npm run marko-playground
+```
+
+## Declaring states
+When marko-playground detects a UI component, it reads its states from the directory `<component>/test/fixtures`. If no state (or fixture) has been found, it falls back to an empty state and renders the component accordingly.
+
+Additional states can be defined with the following directory structure (which is also used by [marko-tester](https://github.com/oxala/marko-tester)):
+
+```json
+<component>/test/
+            ⤷ fixtures/
+               ⤷ default.json
+               ⤷ another-use-case.json
+```
+
+### Example of default.json 
+```json
+{
+    "viewModel": {
+        "title": "default title"
+    }
+}
+```
+
+## Configuration
+
+The marko-playground tool can be configured by adding a `test/playground/config.json` to your project. 
+If no file is found, the following default configuration is used instead:
+
+```js
+{
+  // Playground will listen on this port, override it with environment variable PORT:
+  "port": 8080,
+
+  // Widget components will be searched starting from this directory,
+  // override with COMPONENTS_ROOT_DIR
+  "componentsRootDir": "./src/components",
+
+  // Widget playground's template will be searched in this directory relative 
+  // to component's directory, override with PLAYGROUND_DIR:
+  "playgroundDir": "test/playground",
+
+  // Lasso config, override with LASSO_CONFIG indicating local lasso config JSON file:
+  "lasso": {
+    "plugins": [
+      "lasso-less",
+      "lasso-marko"
+    ],
+    "outputDir": "static",
+    "bundlingEnabled": false,
+    "minify": false,
+    "fingerprintsEnabled": false
+  }
+}
+```
+
+## Lasso flags support
+You can pass flags to lasso page by setting environment variable `FLAGS`, for example: `FLAGS=skin-ds6,mobile`
+
+## Custom playgrounds
+If you don't like the standard component template used in playground, you can use your own. 
+Simply put it in you component's `test/playground` directory and name it `index.marko` or `template.marko`.
+You can always change the location of the template by changing the config property `playgroundDir` or environment variable `PLAYGROUND_DIR`. 
+[Example](test/examples/comps/comp-multi-file-custom/test/pg/index.marko)
+
+## Components discovery
+
+The UI component detection is based on Marko's configuration and respect's the configuration's `tags-dir` and `<component>/renderer` property.
+
+Usually, you have a `marko.json` in your project (or rely on the defaults which is the `components` directory). The marko file looks like this:
+```json
+{
+    "tags-dir": "./components"
+}
+```
+
+If you have a separate component project, your `marko.json` should look similar to this:
+```json
+{
+    "<component-name>": {
+        "renderer": "./component-dir"
+    }
+}
+```
+
+That file usually resides in the root directory ([marko documentation](https://markojs.com/docs/custom-tags/#markojson-syntax).)
+
+## Debugging
+For more diagnostic messages set environment variable `DEBUG` to truthy value like `DEBUG=1`.
+
+## Development
+Git clone this repo, then install everything:
+
+```bash
+yarn 
+#or 
+npm install
+```
+
+Then start playground with test components:
+```bash
+yarn start
+#or
+npm start
+```
+
+Tests can be executed via:
+```bash
+yarn test
+#or
+npm test
+```
+
+## CI
+TBD
+
+## Licence
+
+Copyright 2018 eBay Inc.
+Developer(s): Timur Manyanov 
+
+Use of this source code is governed by an MIT-style
+license that can be found in the LICENSE file or at
+https://opensource.org/licenses/MIT.

bin/marko-playground.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+'use strict';
+
+require('../dist/index.js');

browser.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": [
+    "./styles/const.less",
+    "./styles/sidebar.less",
+    "./styles/comp.less",
+    "./styles/index.less"
+  ]
+}

config/playground.json

@@ -0,0 +1,15 @@
+{
+    "port": 8080,
+    "componentsRootDir": "./src/components",
+    "playgroundDir": "test/playground",
+    "lassoConfig": {
+        "plugins": [
+            "lasso-less",
+            "lasso-marko"
+        ],
+        "outputDir": "static",
+        "bundlingEnabled": false,
+        "minify": false,
+        "fingerprintsEnabled": false
+    }
+}

marko.json

@@ -0,0 +1,3 @@
+{
+    "tags-dir": "./templates"
+}

package.json

@@ -0,0 +1,77 @@
+{
+  "name": "marko-playground",
+  "version": "4.22.0",
+  "description": "Playground for visual testing of Marko components",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rimraf dist templates/*.marko.js test/**/*.marko.js static .cache",
+    "start": "yarn clean && COMPONENTS_ROOT_DIR=test/examples PLAYGROUND_DIR=test/pg yarn ts-node ./src/index.ts",
+    "compile": "tsc",
+    "lint": "tslint ./src/**/*.ts -p .",
+    "unit-test": "mocha 'test/**/*.spec.ts'",
+    "test": "yarn lint && yarn unit-test",
+    "release": "yarn npm_release --auto --auto-fallback minor",
+    "custom": "yarn clean && yarn compile && git fetch && yarn release",
+    "precommit": "yarn lint",
+    "prepush": "yarn test"
+  },
+  "keywords": [
+    "marko",
+    "marko-widgets",
+    "components",
+    "playground",
+    "typescript"
+  ],
+  "author": {
+    "name": "Timur Manyanov",
+    "email": "tmanyanov@ebay.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eBay/marko-playground.git"
+  },
+  "dependencies": {
+    "@lasso/marko-taglib": "^1.0.8",
+    "chalk": "^2.3.1",
+    "express": "^4.14.0",
+    "glob": "^7.1.0",
+    "lasso": "^3.1.0",
+    "lasso-less": "^2.4.7",
+    "lasso-marko": "^2.4.0",
+    "marko": "^4.7.4"
+  },
+  "devDependencies": {
+    "@types/async-writer": "^1.4.30",
+    "@types/chai": "^4.0.10",
+    "@types/express": "^4.0.39",
+    "@types/glob": "^5.0.34",
+    "@types/lasso": "^2.4.0",
+    "@types/lodash": "^4.14.88",
+    "@types/marko": "^4.6.0",
+    "@types/mocha": "^5.0.0",
+    "@types/node": "^8.0.58",
+    "@types/sinon": "^5.0.0",
+    "@types/sinon-chai": "^3.0.0",
+    "chai": "^4.1.2",
+    "chai-as-promised": "^7.1.1",
+    "husky": "^0.14.3",
+    "mocha": "^5.0.1",
+    "release-tools": "^2.5.2",
+    "rimraf": "^2.6.2",
+    "sinon": "^6.0.0",
+    "sinon-chai": "^3.0.0",
+    "source-map-support": "^0.5.6",
+    "ts-node": "^7",
+    "tslint": "^5.8.0",
+    "tslint-config-airbnb": "^5.5.0",
+    "typescript": "^2.7.2"
+  },
+  "bin": {
+    "marko-widgets-playground": "bin/marko-playground.js",
+    "marko-playground": "bin/marko-playground.js"
+  },
+  "engines": {
+    "node": ">=6.12.1"
+  }
+}