Merge branch 'release/v0.10.5'

README.md

@@ -218,15 +218,14 @@ Data on ef.js components are not always that easy to access, so since v0.10.4, a
 
 ## Custom Components
 
-ef.js can handle custom components in templates since v0.10.4. Demo will be added soon.
+ef.js can handle custom components in templates since v0.10.4. [Demo on writing logic within ef template using custom component](https://codepen.io/ClassicOldSong/pen/zYGXLyy)
 
 ### Scoping
 
 Scoping is not done in templates. You can write your template as normal, using whatever tag name you desire for your custom component, like:
 
 ```efml
 App.eft
-
 >div#root
  >MyComponent#myComponent
  >MyOtherComponent
@@ -294,11 +293,11 @@ App.eft
 app.$refs.myComponent.$emit('myEvent') // This will trigger `handleMyEvent`
 ```
 
-Note that modifier keys are no longer able to precent on custom emitted events, so dont attach modifier key on them.
+Note that modifier keys are no longer able to present on custom emitted events, so dont attach modifier key on them.
 
 ### Automatic Two Way Binding
 
-Just like what ef requires HTML elements to do to get custom two way binding, a `value` or `checked` attribute should precent on a custom component, together with an `input` or `keyup` or `change` event been emitted when value has been changed. When binding `checked`, only `changd` event shoule be emitted.
+Just like what ef requires HTML elements to do to get custom two way binding, a `value` or `checked` property should present on a custom component, together with an `input` or `keyup` or `change` event been emitted when value has been changed. When binding `checked`, only `change` event shoule be emitted.
 
 ```efml
 App.eft
@@ -327,8 +326,6 @@ const MyComponent = class extends _MyComponent {
  }
 }
 
-mapAttrs(MyComponent, {value: {}})
-
 const app = new App(null, {MyComponent}) // $data.value will automatically updats with what was changed in MyComponent
 ```
 
@@ -401,6 +398,10 @@ var output = buble.transform( input, {
 }
 ```
 
+## Typing Support
+
+ef.js now has partial typing support using [JSDoc](https://jsdoc.app/), which probably compatibles with TypeScript.
+
 ## Run a test
 ``` bash
 git clone https://github.com/ClassicOldSong/ef.js.git

package.json

@@ -1,14 +1,15 @@
 {
  "name": "ef.js",
- "version": "0.10.4",
+ "version": "0.10.5",
  "description": "(maybe) An elegant HTML template engine & basic framework",
  "main": "dist/ef.min.js",
  "module": "src/ef.js",
  "scripts": {
  "dev": "rollup -c ./config/rollup.dev.js -w",
  "build": "rollup -c ./config/rollup.prod.js",
  "prod": "cross-env BUILD_TARGET=production rollup -c ./config/rollup.prod.js",
- "lint": "eslint --ext .js src"
+ "lint": "eslint --ext .js src",
+ "doc": "jsdoc -r src/"
  },
  "repository": {
  "type": "git",
@@ -27,23 +28,24 @@
  },
  "homepage": "https://ef.js.org",
  "devDependencies": {
+ "@rollup/plugin-buble": "^0.21.1",
+ "@rollup/plugin-commonjs": "^11.0.2",
+ "@rollup/plugin-json": "^4.0.2",
+ "@rollup/plugin-node-resolve": "^7.1.1",
+ "@rollup/plugin-replace": "^2.3.1",
  "chalk": "^4.0.0",
  "chokidar": "^3.3.1",
  "cross-env": "^7.0.2",
  "eslint": "^6.8.0",
+ "jsdoc": "^3.6.3",
  "rollup": "^2.3.2",
  "rollup-plugin-browsersync": "^1.1.0",
- "@rollup/plugin-buble": "^0.21.1",
- "@rollup/plugin-commonjs": "^11.0.2",
  "rollup-plugin-eslint": "^7.0.0",
- "@rollup/plugin-json": "^4.0.2",
- "@rollup/plugin-node-resolve": "^7.1.1",
  "rollup-plugin-progress": "^1.1.1",
- "@rollup/plugin-replace": "^2.3.1",
  "rollup-plugin-uglify": "^6.0.4"
  },
  "dependencies": {
- "ef-core": "^0.10.4",
+ "ef-core": "^0.10.5",
  "eft-parser": "^0.10.1"
  }
 }

src/ef.js

@@ -24,6 +24,16 @@ import {
 // Set parser
 let parser = parseEft
 
+/**
+ * @typedef {import('ef-core/src/lib/renderer.js').EFAST} EFAST
+ * @typedef {import('ef-core/src/ef-core.js').EFComponent} EFComponent
+ */
+
+/**
+ * Return a brand new class for the new component
+ * @param {string|EFAST} value - Template or AST for the component
+ * @returns {EFComponent} - Created component class from AST
+ */
 const create = (value) => {
  const valType = typeOf(value)
  if (valType === 'string') value = parse(value, parser)
@@ -32,11 +42,20 @@ const create = (value) => {
  return createComponent(value)
 }
 
-// Change parser
+/**
+ * Change parser
+ * @param {Function} newParser - Parser you want to change with
+ * @returns {void}
+ */
 const setParser = (newParser) => {
  parser = newParser
 }
 
+/**
+ * Tagged template to quickly create an inline ef component class
+ * @param {...*} args - String literal
+ * @returns {EFComponent} - Created ef component class
+ */
 const t = (...args) => create(mixStr(...args))
 
 export {