Merge pull request #21 from abelljs/next

Abell Renderer v0.2.0, Abell v0.4.0

Author: saurabhdaware

.github/workflows/nodejs.yml

@@ -5,9 +5,9 @@ name: Unit Tests and ESLint
 
 on:
   push:
-    branches: [main]
+    branches: [main, next]
   pull_request:
-    branches: [main]
+    branches: [main, next]
 
 jobs:
   test:
@@ -16,7 +16,7 @@ jobs:
     strategy:
       matrix:
         node-version: [10.x, 12.x]
-        os: ['windows-latest', 'ubuntu-latest']
+        os: ['windows-latest', 'ubuntu-latest', 'macos-latest']
 
     steps:
       - uses: actions/checkout@v2

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## v0.2.0
+
+- Default value of props in components is now empty object instead of undefined.
+- Multi-line support for writing component tag.
+- Convert Array into String by joining the values.
+- Now devs would not have to write `.join` next to map, to remove commas.
+- Naming rule of having `.component.abell` extension, removed. Any file that ends with `.abell`, can be a component.
+- Filename and error line in error stack 🎉
+- Error when brackets and value had no space, fixed (e.g. `{{a}}`)
+- Nested Components
+- Better Error logs
+- Support for Abell Components when `allowComponents` flag is passed in options. (Does not support nested components yet)
+
 ## v0.1.12
 
 - Throw error at `execute` to avoid having vm data in error stack

CONTRIBUTING.md

@@ -9,7 +9,7 @@
 ```sh
 git clone https://github.com/<your-github-username>/abell-renderer
 cd abell-renderer
-npm run example main # to run example `main` from `examples/main
+npm run example main # to run example `main` from `examples/main`
 ```
 
 ## Running Examples

bin/abell-renderer.js

@@ -31,11 +31,22 @@ const recursiveFind = (base, ext, inputFiles, inputResult) => {
   return result;
 };
 
-const createPathIfAbsent = (pathToCreate) => {
-  if (!fs.existsSync(pathToCreate)) {
-    fs.mkdirSync(pathToCreate);
-  }
-};
+/**
+ * Recursively creates the path
+ * @param {String} pathToCreate path that you want to create
+ */
+function createPathIfAbsent(pathToCreate) {
+  // prettier-ignore
+  pathToCreate
+    .split(path.sep)
+    .reduce((prevPath, folder) => {
+      const currentPath = path.join(prevPath, folder, path.sep);
+      if (!fs.existsSync(currentPath)) {
+        fs.mkdirSync(currentPath);
+      }
+      return currentPath;
+    }, '');
+}
 
 /**
  * @method generateHTMLFromAbell

examples/main/in.abell

@@ -36,5 +36,7 @@
   </div>
   Empty bracets check:
   <div>{{ }}</div>
+
+  {{ [1, 2, 3, 67] }}
 </body>
 </html>

examples/run.js

@@ -14,6 +14,7 @@
 const fs = require('fs');
 const path = require('path');
 const abellRenderer = require('../src/index.js');
+const { exec } = require('child_process');
 
 const args = process.argv.slice(2);
 const exampleToRun = args[0];
@@ -25,6 +26,21 @@ if (exampleToRun === 'cli-example') {
   throw new Error('Use npm run example:cli to run CLI example');
 }
 
+/**
+ * if example has index.js, then execute index.js instead of this file.
+ */
+if (fs.existsSync(path.join(__dirname, exampleToRun, 'index.js'))) {
+  console.log(
+    `>> Found index.js in the examples/${exampleToRun}, running index.js`
+  );
+
+  exec(`node examples/${exampleToRun}/index.js`, (err, stdout, stderr) => {
+    console.log(stdout);
+    console.log(stderr);
+  });
+  return;
+}
+
 console.log('>> Running ' + exampleToRun);
 
 // Sandox holds parameters values are used in abell file
@@ -38,7 +54,11 @@ const htmlTemplate = abellRenderer.render(
   sandbox,
   {
     basePath: path.join(__dirname, exampleToRun),
-    allowRequire: true
+    allowRequire: true,
+    filename: path.relative(
+      process.cwd(),
+      path.join(__dirname, exampleToRun, 'in.abell')
+    )
   }
 );
 

examples/with-components/Footer.abell

@@ -0,0 +1,13 @@
+<AbellComponent>
+<template>
+  <footer data-test="footer-component"> This is my Footer {{ props.foo }}</footer>
+</template>
+<style inlined>
+  nav {
+    color: #f30;
+  }
+</style>
+<script>
+  document.querySelector('nav').innerHTML = 'This is from JS';
+</script>
+</AbellComponent>

examples/with-components/Nav.abell

@@ -0,0 +1,17 @@
+<AbellComponent>
+{{
+  const Footer = require('./Footer.abell');
+}}
+<template>
+  <nav data-test="nav-component"> This is my Navbar {{ props.num + props.num2 }} </nav>
+  <Footer props={ hello: 'hehehe', foo: 'hello' } />
+</template>
+<style>
+  nav {
+    color: #f30;
+  }
+</style>
+<script>
+  document.querySelector('nav').innerHTML = 'This is from JS';
+</script>
+</AbellComponent>

examples/with-components/in.abell

@@ -0,0 +1,13 @@
+{{
+  const Nav = require('./Nav.abell');
+}}
+{{ const a = 3 }}
+<body>
+  <Nav 
+    props={ 
+      num: 10, 
+      num2: a 
+    }
+  />
+  <main data-test="main-content">Content</main>
+</body>

examples/with-components/index.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+const abellRenderer = require('../../src/index.js');
+
+const abellTemplate = fs.readFileSync(
+  path.join(__dirname, 'in.abell'),
+  'utf-8'
+);
+
+const { html, components } = abellRenderer.render(
+  abellTemplate,
+  {
+    foo: 'Hehhe'
+  },
+  {
+    allowRequire: true,
+    allowComponents: true,
+    basePath: __dirname
+  }
+);
+
+console.log(components);
+
+fs.writeFileSync(path.join(__dirname, 'out.html'), html);