Merge pull request #115 from idyll-lang/stepper-scroller

Enable steppers and scrollers

package.json

@@ -53,11 +53,11 @@
     "fast-copy": "^2.1.1",
     "fast-deep-equal": "^3.1.3",
     "fix-path": "^3.0.0",
-    "idyll": "^5.4.2",
+    "idyll": "^5.4.5",
     "idyll-ast": "^2.2.3",
     "idyll-compiler": "^4.0.23",
-    "idyll-components": "^4.1.12",
-    "idyll-document": "^3.4.14",
+    "idyll-components": "^4.1.15",
+    "idyll-document": "^3.4.15",
     "lodash.throttle": "^4.1.1",
     "npm": "^7.6.1",
     "open": "^7.4.2",

src/constants.js

@@ -77,7 +77,6 @@ export const EXCLUDED_COMPONENTS = [
   'generateHeaders',
   'fixed',
   'inline',
-  'scroller',
   'step',
   'stepper-control',
   'case',
@@ -86,7 +85,6 @@ export const EXCLUDED_COMPONENTS = [
   'analytics',
   'meta',
   'preload',
-  'stepper',
   'h1',
   'h2',
   'h3',

src/render/idyll-display/components/drop-target.js

@@ -2,8 +2,10 @@ import React from 'react';
 import { DropTarget } from 'react-dnd';
 import { RENDER_WINDOW_NAME } from '../../../constants';
 import Context from '../../context/context';
-import { getRandomId } from '../utils';
+import { getRandomId, relativeDataPaths } from '../utils';
 const compile = require('idyll-compiler');
+const AST = require('idyll-ast');
+
 
 const BASE_CLASS_NAME = 'idyll-studio-drop-target';
 
@@ -83,14 +85,15 @@ const withDropListener = (callback) => {
           tagInfo.children !== undefined ? tagInfo.children[0] : '';
         tag += ']' + children + '[/' + tagInfo.name + ']';
       }
+
       this.handleASTChange(tag, visibleDropTargets);
     }
 
     // Given String tag of component, adds corresponding nodes to ast
     // and sends modified ast back up to top level
     handleASTChange(componentMarkup, visibleDropTargets) {
       const { insertBefore, insertAfter } = this.props;
-      const { ast } = this.context;
+      let { ast } = this.context;
 
       let targetNode;
       let position;
@@ -104,12 +107,21 @@ const withDropListener = (callback) => {
 
       compile(componentMarkup).then((componentAST) => {
         let componentNode = componentAST.children[0];
+        let loopCount = 0;
         while (
           componentNode.name &&
           (componentNode.name.toLowerCase() === 'textcontainer' ||
             componentNode.name.toLowerCase() === 'text-container')
         ) {
           componentNode = componentNode.children[0];
+          loopCount += 1;
+        }
+
+        // If the component is not wrapped in a text-container,
+        // then it is fullWidth
+        if (loopCount === 0) {
+          componentNode.properties = componentNode.properties || {};
+          componentNode.properties.fullWidth = { type: "value", value: true };
         }
 
         const randomizeIds = (node) => {
@@ -165,6 +177,8 @@ const withDropListener = (callback) => {
           }
         }
 
+
+
         let numBefore = 0;
 
         visibleDropTargets.forEach((target, i) => {
@@ -178,6 +192,11 @@ const withDropListener = (callback) => {
           RENDER_WINDOW_NAME
         )[0].scrollTop;
 
+        if (componentNode.properties && componentNode.properties.fullWidth) {
+          const markup = AST.toMarkup(relativeDataPaths(ast), { insertFullWidth: true });
+          ast = compile(markup, { async: false });
+        }
+
         this.context.setAst(ast); // must pass info up level
         if (callback) {
           callback(scrollPosition, height);

src/render/idyll-display/render.js

@@ -132,7 +132,9 @@ const Renderer = withContext(
         const _NODE_PATH = process.env.NODE_PATH;
         process.env.NODE_PATH += ':' + __dirname;
         delete require.cache[require.resolve(component.path)];
-        this.loadedComponents[component.name] = require(require.resolve(
+
+        const _name = component.name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
+        this.loadedComponents[_name] = require(require.resolve(
           component.path,
           {
             paths: [component.path, __dirname],
@@ -168,16 +170,18 @@ const Renderer = withContext(
       const _NODE_PATH = process.env.NODE_PATH;
       process.env.NODE_PATH += ':' + __dirname;
       components.forEach(({ name, path }) => {
-        if (!this.loadedComponents[name]) {
+        const _name = name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
+        if (!this.loadedComponents[_name]) {
           try {
-            this.loadedComponents[name] = require(require.resolve(path, {
+            this.loadedComponents[_name] = require(require.resolve(path, {
               paths: [path, __dirname],
             }));
           } catch (e) {
             console.log('Error loading component', name);
           }
         }
       });
+
       process.env.NODE_PATH = _NODE_PATH;
 
       return (

src/render/idyll-display/utils/index.js

@@ -4,6 +4,7 @@ import fs from 'fs';
 import path from 'path';
 import parse from 'csv-parse/lib/sync';
 import copy from 'fast-copy';
+const AST = require('idyll-ast');
 
 const getRandomId = () => {
   return Math.floor(Math.random() * 10000000000) + 100000000;
@@ -323,6 +324,17 @@ const readFile = (source) => {
 
 const getComponentDomId = (name, id) => `${name}-${id}`;
 
+
+
+const relativeDataPaths = (ast) => {
+  const dataNodes = AST.getNodesByType(ast, 'data');
+  dataNodes.forEach((node) => {
+    node.properties.source.value = path.basename(node.properties.source.value);
+  });
+  return ast;
+};
+
+
 module.exports = {
   getNodeById,
   getParentNodeById,
@@ -343,4 +355,5 @@ module.exports = {
   boolify,
   reassignNodeIds,
   getComponentDomId,
+  relativeDataPaths
 };

src/render/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import IdyllDisplay from './idyll-display';
 import Context from './context/context';
 import copy from 'fast-copy';
-import { readFile, jsonParser } from './idyll-display/utils';
+import { readFile, jsonParser, relativeDataPaths } from './idyll-display/utils';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { basename } from 'path';
@@ -19,14 +19,6 @@ const PUBLISHED =
   'Published! It may take up to a minute for the latest changes to be reflected.';
 
 
-  const relativeDataPaths = (ast) => {
-    const dataNodes = idyllAST.getNodesByType(ast, 'data');
-    dataNodes.forEach((node) => {
-      node.properties.source.value = basename(node.properties.source.value);
-    });
-    return ast;
-  };
-
 class App extends React.PureComponent {
   constructor(props) {
     super(props);