fix: create playground to evaluate self-contained styles (#1436)

package.json

@@ -17,6 +17,7 @@
     "release:create": "create-release",
     "release": "./scripts/publish-release.sh",
     "start:playground": "node test/app.js",
+    "start:playground:scs": "PORT=3031 SELF_CONTAINED=true npm run start:playground",
     "start:browser-sync": "browser-sync start --proxy 'localhost:4000' --files 'docs/_site/**/*' --reloadDelay '2000'",
     "start": "npm run docs:compile && cd docs && bundle install && bundle exec jekyll serve --incremental --config _config.yml,_config-library.yml",
     "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",

test/app.js

@@ -155,6 +155,10 @@ env.addFilter('merge_objs', function (obj1 = {}, obj2 = {}) {
     return result;
 });
 
+app.set('port', process.env.PORT || 3030);
+
+let port = app.get('port');
+
 app.set('views', TEMPLATE_DIRECTORY);
 app.set('view engine', 'njk');
 
@@ -213,65 +217,28 @@ router.get('/:key', (req, res) => {
     } finally {
 
     }
-    signale.info(`Requested http://localhost:3030/${key}`);
-    res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, libs: getLibs(req.query.lib) }));
+    signale.info(`Requested http://localhost:${port}/${key}`);
+    res.render(`${key}/index`, Object.assign(GLOBALS, { id: key, component: getStarterData(), data, selfContained: process.env.SELF_CONTAINED }));
 });
 
 
 router.get('/pages/:key', (req, res) => {
     const key = req.params.key;
-    signale.info(`Requested http://localhost:3030/pages/${key}`);
+    signale.info(`Requested http://localhost:${port}/pages/${key}`);
     res.render(`pages/${key}`, Object.assign(GLOBALS, { id: key, data: getStarterData(), app: config }));
 });
 router.get('/pages/app/:key', (req, res) => {
     const key = req.params.key;
-    signale.info(`Requested http://localhost:3030/pages/app/${key}`);
+    signale.info(`Requested http://localhost:${port}/pages/app/${key}`);
     res.render(`pages/app/${key}`, Object.assign(GLOBALS, { id: key, data: getStarterData(), app: config }));
 });
 router.get('/pages/floorplans/:key', (req, res) => {
     const key = req.params.key;
-    signale.info(`Requested http://localhost:3030/pages/floorplans/${key}`);
+    signale.info(`Requested http://localhost:${port}/pages/floorplans/${key}`);
     res.render(`pages/floorplans/${key}`, Object.assign(GLOBALS, { id: key, data: getStarterData(), app: config }));
 });
 
 
-app.listen(3030);
-signale.watch('Listening at http://localhost:3030')
+app.listen(port);
+signale.watch(`Listening at http://localhost:${port}`);
 module.exports = app;
-
-function getLibs(libQuery) {
-    const libs = {
-        b3: false,
-        b4: false,
-        md: false,
-        tn: false,
-        ie: false
-    };
-    let libsChecked = libQuery;
-    if (libsChecked) {
-        if (typeof libsChecked == 'string') {
-            libsChecked = [libsChecked];
-        }
-        for (let i = 0; i < libsChecked.length; i++) {
-            switch (libsChecked[i]) {
-                case "b3":
-                    libs.b3 = true;
-                    break;
-                case "b4":
-                    libs.b4 = true;
-                    break;
-                case "md":
-                    libs.md = true;
-                    break;
-                case "tn":
-                    libs.tn = true;
-                    break;
-                case "ie11":
-                    libs.ie = true;
-                    break;
-                default:
-            }
-        }
-    }
-    return libs;
-}