feat: content type for joining

README.md

@@ -50,8 +50,8 @@ It should be noted that Lucia should not be implemented in all use cases. Lucia
 
 - [Vue](https://github.com/vuejs/vue) - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
 - [Alpine](https://github.com/alpinejs/alpine) - A rugged, minimal framework for composing JavaScript behavior in your markup.
-- [Stimulus](https://github.com/stimulusjs/stimulus) - A modest JavaScript framework for the HTML you already have.
 - [Remake](https://github.com/remake/remake-cli) - Create interactive web apps with just HTML.
+- [Stimulus](https://github.com/stimulusjs/stimulus) - A modest JavaScript framework for the HTML you already have.
 - [Mavo](https://github.com/mavoweb/mavo) - Create web applications entirely by writing HTML and CSS!
 
 ## Contributing

src/directives/join.ts

@@ -3,13 +3,15 @@ import { createApp } from '../index';
 import { DirectiveArgs } from './IDirectiveArgs';
 
 export const joinDirective = ({ el, value, view }: DirectiveArgs) => {
-  const [array, delimiter] = value.split('by ');
+  const [array, contentType, delimiter] = value.split(/ as | by /);
   const out = compute(array, { $view: view, $el: el });
 
+  // By default
+  const accessProp = contentType === 'text' ? 'innerText' : 'innerHTML';
   if (out !== undefined) {
-    el.innerHTML = out.join(delimiter || '');
+    el[accessProp] = out.join(delimiter || '');
   } else {
-    el.innerHTML = array.join(delimiter || '');
+    el[accessProp] = array.join(delimiter || '');
   }
 
   // Create shallow nested Lucia app

src/utils/compute.ts

@@ -7,7 +7,7 @@ const computeProperties = (
   // view keys as global properties. Accept normal eval if this.$view is not
   // provided in the data parameter
   return new Function(
-    `with(${Object.keys(data).length === 0 ? 'this' : 'this.$view'}) {${
+    `with(${Object.keys(data).length === 0 ? 'this' : 'this.$view'}){${
       // Return if requested
       returnable ? `return ${expression}` : expression
     }}`