diff --git a/README.md b/README.md index c99e4b9..e2c8d92 100644 --- a/README.md +++ b/README.md @@ -218,7 +218,7 @@ 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 @@ -226,7 +226,6 @@ Scoping is not done in templates. You can write your template as normal, using w ```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 diff --git a/package-lock.json b/package-lock.json index 2863f05..e26c545 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ef.js", - "version": "0.10.4", + "version": "0.10.5", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -82,6 +82,12 @@ } } }, + "@babel/parser": { + "version": "7.9.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz", + "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==", + "dev": true + }, "@rollup/plugin-buble": { "version": "0.21.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.1.tgz", @@ -514,6 +520,12 @@ "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==", "dev": true }, + "bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1524,6 +1536,15 @@ "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", "dev": true }, + "catharsis": { + "version": "0.8.11", + "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.11.tgz", + "integrity": "sha512-a+xUyMV7hD1BrDQA/3iPV7oc+6W26BgVJO05PGEoatMyIuPScQKsde6i3YorWX1qs+AZjnJ18NqdKoCtKiNh1g==", + "dev": true, + "requires": { + "lodash": "^4.17.14" + } + }, "chalk": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz", @@ -1896,9 +1917,9 @@ "dev": true }, "ef-core": { - "version": "0.10.4", - "resolved": "https://registry.npmjs.org/ef-core/-/ef-core-0.10.4.tgz", - "integrity": "sha512-leZM3GedU3w6ZUnf3ED6u20E3vuor4BSbTSeH3tdP1TdO7QI45amN34NaIITgsEn6/ACy/cPuCBFjVfzjZgx+g==" + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/ef-core/-/ef-core-0.10.5.tgz", + "integrity": "sha512-eEeWJJoZsqZkpc9Boew/9dXPAlFb7Dqx3UggtE9phSCwcqzGecUyaB58dQdyA36TIBUaVqsvhjeKfKjSnRCMIw==" }, "eft-parser": { "version": "0.10.1", @@ -2004,6 +2025,12 @@ "has-binary2": "~1.0.2" } }, + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", + "dev": true + }, "error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -3115,6 +3142,45 @@ "esprima": "^4.0.0" } }, + "js2xmlparser": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.1.tgz", + "integrity": "sha512-KrPTolcw6RocpYjdC7pL7v62e55q7qOMHvLX1UCLc5AAS8qeJ6nukarEJAF2KL2PZxlbGueEbINqZR2bDe/gUw==", + "dev": true, + "requires": { + "xmlcreate": "^2.0.3" + } + }, + "jsdoc": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-3.6.3.tgz", + "integrity": "sha512-Yf1ZKA3r9nvtMWHO1kEuMZTlHOF8uoQ0vyo5eH7SQy5YeIiHM+B0DgKnn+X6y6KDYZcF7G2SPkKF+JORCXWE/A==", + "dev": true, + "requires": { + "@babel/parser": "^7.4.4", + "bluebird": "^3.5.4", + "catharsis": "^0.8.11", + "escape-string-regexp": "^2.0.0", + "js2xmlparser": "^4.0.0", + "klaw": "^3.0.0", + "markdown-it": "^8.4.2", + "markdown-it-anchor": "^5.0.2", + "marked": "^0.7.0", + "mkdirp": "^0.5.1", + "requizzle": "^0.2.3", + "strip-json-comments": "^3.0.1", + "taffydb": "2.6.2", + "underscore": "~1.9.1" + }, + "dependencies": { + "escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "dev": true + } + } + }, "jsesc": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", @@ -3148,6 +3214,15 @@ "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, + "klaw": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz", + "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.9" + } + }, "lcid": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", @@ -3173,6 +3248,15 @@ "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==", "dev": true }, + "linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "dev": true, + "requires": { + "uc.micro": "^1.0.1" + } + }, "load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -3292,6 +3376,37 @@ "object-visit": "^1.0.0" } }, + "markdown-it": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz", + "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "entities": "~1.1.1", + "linkify-it": "^2.0.0", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + } + }, + "markdown-it-anchor": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.2.7.tgz", + "integrity": "sha512-REFmIaSS6szaD1bye80DMbp7ePwsPNvLTR5HunsUcZ0SG0rWJQ+Pz24R4UlTKtjKBPhxo0v0tOBDYjZQQknW8Q==", + "dev": true + }, + "marked": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz", + "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==", + "dev": true + }, + "mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=", + "dev": true + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -4039,6 +4154,15 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "requizzle": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.3.tgz", + "integrity": "sha512-YanoyJjykPxGHii0fZP0uUPEXpvqfBDxWV7s6GKAiiOsiqhX6vHNyW3Qzdmqp/iq/ExbhaGbVrjB4ruEVSM4GQ==", + "dev": true, + "requires": { + "lodash": "^4.17.14" + } + }, "resolve": { "version": "1.15.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", @@ -5049,6 +5173,12 @@ } } }, + "taffydb": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/taffydb/-/taffydb-2.6.2.tgz", + "integrity": "sha1-fLy2S1oUG2ou/CxdLGe04VCyomg=", + "dev": true + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -5202,6 +5332,12 @@ "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==", "dev": true }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", + "dev": true + }, "uglify-js": { "version": "3.8.1", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.1.tgz", @@ -5226,6 +5362,12 @@ "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==", "dev": true }, + "underscore": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.2.tgz", + "integrity": "sha512-D39qtimx0c1fI3ya1Lnhk3E9nONswSKhnffBI0gME9C99fYOkNi04xs8K6pePLhvl1frbDemkaBQ5ikWllR2HQ==", + "dev": true + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -5477,6 +5619,12 @@ "async-limiter": "~1.0.0" } }, + "xmlcreate": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.3.tgz", + "integrity": "sha512-HgS+X6zAztGa9zIK3Y3LXuJes33Lz9x+YyTxgrkIdabu2vqcGOWwdfCpf1hWLRrd553wd4QCDf6BBO6FfdsRiQ==", + "dev": true + }, "xmlhttprequest-ssl": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", diff --git a/package.json b/package.json index d4b53b2..f6ce4b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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", @@ -8,7 +8,8 @@ "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" } } diff --git a/src/ef.js b/src/ef.js index 23a847b..2e7b41d 100644 --- a/src/ef.js +++ b/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 { diff --git a/test/test.js b/test/test.js index eab947d..3c698e3 100644 --- a/test/test.js +++ b/test/test.js @@ -127,8 +127,6 @@ var module1 = ef.create(template) var module2 = ef.create(template2) var module3 = ef.create(template3) -ef.registerProps(module1, {value: {key: 'value'}}) - class module1_1 extends module1 { constructor(...args) { super(...args)