Wondering what’s next for npm?Check out our public roadmap! »

    @ebay/marko-playground

    4.22.0 • Public • Published

    build status

    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

    Getting started

    First, add marko-playground to your project by running the following command:

    yarn add --dev marko-playground
    #or 
    npm i --save-dev marko-playground

    Now you can start the playground via

    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):

    <component>/test/
                ⤷ fixtures/
                   ⤷ default.json
                   ⤷ another-use-case.json

    Example of default.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:

    {
      // 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

    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:

    {
        "tags-dir": "./components"
    }

    If you have a separate component project, your marko.json should look similar to this:

    {
        "<component-name>": {
            "renderer": "./component-dir"
        }
    }

    That file usually resides in the root directory (marko documentation.)

    Debugging

    For more diagnostic messages set environment variable DEBUG to truthy value like DEBUG=1.

    Development

    Git clone this repo, then install everything:

    yarn 
    #or  
    npm install

    Then start playground with test components:

    yarn start
    #or 
    npm start

    Tests can be executed via:

    yarn test
    #or 
    npm test

    CI

    https://travis-ci.org/eBay/marko-playground

    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.

    Install

    npm i @ebay/marko-playground

    DownloadsWeekly Downloads

    1

    Version

    4.22.0

    License

    MIT

    Unpacked Size

    175 kB

    Total Files

    79

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar