rasti 2.0.0-alpha.6 → 2.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/rasti.js +1 -1
- package/dist/rasti.min.js +1 -1
- package/es/Component.js +3 -1
- package/lib/Component.js +3 -1
- package/package.json +1 -1
- package/src/Component.js +4 -1
package/dist/rasti.js
CHANGED
|
@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
|
|
|
26
26
|
\**************************/
|
|
27
27
|
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
|
|
28
28
|
|
|
29
|
-
eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _View2 = _interopRequireDefault(__webpack_require__(/*! ./View.js */ \"./src/View.js\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n// This options keys will be extended on view instance.\nvar componentOptions = {\n key: true,\n state: true,\n onCreate: true,\n onChange: true,\n onRender: true\n};\n\n/*\n * Helper function. Extract attributes from html tag\n * @param text {string} html text\n * @return {object} Object with keys / values representing attributes.\n */\nvar extractAttributes = function extractAttributes(text) {\n var attributes = {};\n var re = /(\\w+)(?:=[\"']?((?:.(?![\"']?\\s+(?:\\S+)=|\\s*\\/?[>\"']))+.)[\"']?)?/g;\n var result;\n while ((result = re.exec(text)) !== null) {\n attributes[result[1]] = typeof result[2] === 'undefined' ? true : result[2];\n }\n return attributes;\n};\n\n/*\n * Helper function. If first arg is a placeholder for an expression, return the expression.\n */\nvar getExpression = function getExpression(placeholder, expressions) {\n var match = placeholder && placeholder.match && placeholder.match(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)')));\n return match && match[1] ? expressions[match[1]] : placeholder;\n};\n\n/*\n * Helper function. If expression is a function, call it with context and args.\n */\nvar evalExpression = function evalExpression(expression, context) {\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n return typeof expression === 'function' ? expression.apply(context, args) : expression;\n};\n\n/**\n * Components are a special kind of `View` that is designed to be easily composable, \n * making it simple to add child views and build complex user interfaces.<br />\n * Unlike views, which are render-agnostic, components have a specific set of rendering \n * guidelines that allow for a more declarative development style.<br />\n * Components are defined with the `create` static method, which takes a tagged template.\n * @module\n * @extends Rasti.View\n * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.\n * @property {string} key A unique key to identify the component. Used to recycle child components.\n * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic.\n * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state.\n * @example\n * import { Component, Model } from 'rasti';\n * // Create Timer component.\n * const Timer = Component.create`\n * <div>\n * Seconds: <span>${({ model }) => model.seconds}</span>\n * </div>\n * `;\n * // Create model to store seconds.\n * const model = new Model({ seconds: 0 });\n * // Mount timer on body.\n * Timer.mount({ model }, document.body);\n * // Increment `model.seconds` every second.\n * setInterval(() => model.seconds++, 1000);\n */\nvar Component = /*#__PURE__*/function (_View) {\n _inheritsLoose(Component, _View);\n function Component() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _this = _View.call(this, options) || this;\n // Extend \"this\" with options, mapping componentOptions keys.\n Object.keys(options).forEach(function (key) {\n if (componentOptions[key]) _this[key] = options[key];\n });\n // Store options by default.\n _this.options = options;\n // Ensure id.\n _this.id = _this.attributes.id ?\n // If id is provided, evaluate it.\n evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :\n // Generate a unique id and set it as id attribute.\n Component.ID_TEMPLATE(_this.uid);\n // Bind onChange to this to be used as listener.\n // Store bound version, so it can be removed on onDestroy method.\n _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));\n // Listen to model changes and call onChange.\n if (_this.model) _this.model.on('change', _this.onChange);\n if (_this.state) _this.state.on('change', _this.onChange);\n // Call life cycle method.\n _this.onCreate.apply(_assertThisInitialized(_this), arguments);\n return _this;\n }\n\n /*\n * Override. We don't want to ensure an element on instantiation.\n * We will provide it later.\n */\n var _proto = Component.prototype;\n _proto.ensureElement = function ensureElement() {\n // If el is provided, delegate events.\n if (this.el) this.delegateEvents();\n }\n\n /*\n * Find view's element on parent node, using id.\n */;\n _proto.findElement = function findElement(parent) {\n return (parent || document).querySelector(\"#\" + this.id);\n }\n\n /*\n * Eval attributes expressions.\n */;\n _proto.getAttributes = function getAttributes() {\n var _this2 = this;\n var add = {};\n var remove = {};\n var attrs = [];\n Object.keys(this.attributes).forEach(function (key) {\n if (key === 'id') return;\n // Evaluate attribute value.\n var value = evalExpression(_this2.attributes[key], _this2, _this2);\n // Transform bool attribute values\n if (value === false) {\n remove[key] = true;\n } else if (value === true) {\n add[key] = '';\n attrs.push(key);\n } else {\n add[key] = value;\n attrs.push(key + \"=\\\"\" + value + \"\\\"\");\n }\n });\n add.id = this.id;\n attrs.push(\"id=\\\"\" + this.id + \"\\\"\");\n return {\n add: add,\n remove: remove,\n html: attrs.join(' ')\n };\n }\n\n /*\n * Used internally on the render process.\n * Attach the view to the dom element.\n */;\n _proto.hydrate = function hydrate(parent) {\n var _this3 = this;\n this.el = this.findElement(parent);\n this.delegateEvents();\n this.children.forEach(function (child) {\n return child.hydrate(_this3.el);\n });\n this.onRender.call(this, 'hydrate');\n }\n\n /*\n * Used internally on the render process.\n * Reuse a view that has `key` when its parent is rendered.\n */;\n _proto.recycle = function recycle(parent) {\n // Find element to be replaced. It has same id.\n var toBeReplaced = this.findElement(parent);\n // Replace it with this.el.\n toBeReplaced.replaceWith(this.el);\n // Call `onRender` lifecycle method.\n this.onRender.call(this, 'recycle');\n }\n\n /*\n * Override. Add some custom logic to super `destroy` method.\n */;\n _proto.destroy = function destroy() {\n _View.prototype.destroy.apply(this, arguments);\n // Stop listening to `change`.\n // Set destroyed flag to prevent a last render after destroyed. TODO: Review\n if (this.model) this.model.off('change', this.onChange);\n if (this.state) this.state.off('change', this.onChange);\n this.destroyed = true;\n }\n\n /**\n * Lifecycle method. Called when the view is created at the end of the constructor.\n * @param options {object} The view options.\n */;\n _proto.onCreate = function onCreate() {}\n\n /**\n * Lifecycle method. Called when model emits `change` event.\n * By default calls render method.\n * This method should be extended with custom logic.\n * Maybe comparing new attributes with previous ones and calling\n * render when needed. Or doing some dom transformation.\n * @param model {Rasti.Model} The model that emitted the event.\n * @param key {string} The key that changed.\n * @param value {any} The new value.\n */;\n _proto.onChange = function onChange() {\n this.render();\n }\n\n /**\n * Lifecycle method. Called when the view is rendered.\n * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.\n */;\n _proto.onRender = function onRender() {}\n\n /**\n * Lifecycle method. Called when the view is destroyed.\n * @param {object} options Options object or any arguments passed to `destroy` method.\n */;\n _proto.onDestroy = function onDestroy() {}\n\n /*\n * Replace expressions.\n */;\n _proto.replaceExpressions = function replaceExpressions(string, addChild) {\n var _this4 = this;\n return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)'), 'g'), function (match) {\n var expression = getExpression(match, _this4.template.expressions);\n // Eval expression. Pass view as argument.\n var result = evalExpression(expression, _this4, _this4);\n // Treat all expressions as arrays.\n var results = result instanceof Array ? result : [result];\n // Replace expression with the result of the evaluation.\n return results.reduce(function (out, result) {\n var parsed;\n // If result is true, replace it with a placeholder.\n if (result === true) parsed = Component.TRUE_PLACEHOLDER;\n // If result is false, replace it with a placeholder.\n else if (result === false) parsed = Component.FALSE_PLACEHOLDER;\n // Replace null or undefined with empty string.\n else if (result === null || typeof result === 'undefined') parsed = '';\n // If result is a view, call addChild callback.\n else if (result && typeof result.render === 'function') parsed = addChild(result);\n // Return expression itself.\n else parsed = result;\n // Concatenate expressions.\n return out + parsed;\n }, '');\n })\n // Replace `attribute=\"true\"` with `attribute`\n .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.TRUE_PLACEHOLDER + \"[\\\"|']\", 'g'), '$1')\n // Replace `attribute=\"false\"` with empty string.\n .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.FALSE_PLACEHOLDER + \"[\\\"|']\", 'g'), '')\n // Replace rest of false expressions with empty string.\n .replace(new RegExp(Component.FALSE_PLACEHOLDER, 'g'), '');\n }\n\n /*\n * Treat the whole view as a HTML string.\n */;\n _proto.toString = function toString() {\n var _this5 = this;\n // Normally there won't be any children, but if there are, destroy them.\n this.destroyChildren();\n // Replace expressions.\n var inner = this.template.inner && this.replaceExpressions(this.template.inner, function (component) {\n // Add child component.\n return _this5.addChild(component);\n });\n // Generate outer template.\n return inner ? \"<\" + this.tag + \" \" + this.getAttributes().html + \">\" + inner + \"</\" + this.tag + \">\" : \"<\" + this.tag + \" \" + this.getAttributes().html + \" />\";\n }\n\n /*\n * View render method.\n */;\n _proto.render = function render() {\n var _this6 = this;\n // Prevent a last re render if view is already destroyed.\n if (this.destroyed) return this;\n // If `this.el` is not present, create a new `this.tag` element.\n if (!this.el) {\n this.el = this.createElement(this.tag);\n this.delegateEvents();\n }\n // Set `this.el` attributes.\n var attributes = this.getAttributes();\n // Remove attributes.\n Object.keys(attributes.remove).forEach(function (key) {\n _this6.el.removeAttribute(key);\n });\n // Add attributes.\n Object.keys(attributes.add).forEach(function (key) {\n _this6.el.setAttribute(key, attributes.add[key]);\n });\n // Check for `template.inner` to see if view has innerHTML.\n if (this.template.inner) {\n var previousChildren = this.children;\n this.children = [];\n var nextChildren = [];\n var recycledChildren = [];\n // Store active element.\n var activeElement = document.activeElement;\n // Replace expressions. Set html inside of `this.el`.\n this.el.innerHTML = this.replaceExpressions(this.template.inner, function (component) {\n var out = component;\n // Check if child already exists.\n var found = component.key && previousChildren.find(function (previousChild) {\n return previousChild.key === component.key;\n });\n if (found) {\n // If child already exists, replace it html by its root element.\n out = \"<\" + found.tag + \" id=\\\"\" + found.id + \"\\\"></\" + found.tag + \">\";\n // Add child to recycled children.\n recycledChildren.push(found);\n // Destroy new child component. Use recycled one instead.\n component.destroy();\n } else {\n // Not found. Add new child component.\n nextChildren.push(component);\n }\n // Component html.\n return out;\n });\n // Add new children. Hydrate them.\n nextChildren.forEach(function (nextChild) {\n _this6.addChild(nextChild).hydrate(_this6.el);\n });\n // Replace children root elements with recycled components.\n recycledChildren.forEach(function (recycledChild) {\n _this6.addChild(recycledChild).recycle(_this6.el);\n });\n // Destroy unused children.\n previousChildren.forEach(function (previousChild) {\n var found = recycledChildren.indexOf(previousChild) > -1;\n if (!found) previousChild.destroy();\n });\n // Restore focus.\n if (this.el.contains(activeElement)) {\n activeElement.focus();\n }\n }\n // Call onRender lifecycle method.\n this.onRender.call(this, 'render');\n // Return this for chaining.\n return this;\n }\n\n /**\n * Helper method used to extend a `Component`, creating a subclass.\n * @static\n * @param {object} object Object containing methods to be added to the new `Component` subclass. Also can be a function that receives the parent prototype and returns an object.\n */;\n Component.extend = function extend(object) {\n var Current = this;\n var Extended = /*#__PURE__*/function (_Current) {\n _inheritsLoose(Extended, _Current);\n function Extended() {\n return _Current.apply(this, arguments) || this;\n }\n return Extended;\n }(Current);\n Object.assign(Extended.prototype, typeof object === 'function' ? object(Current.prototype) : object);\n return Extended;\n }\n\n /**\n * Mount the component into the dom.\n * It instantiate the Component view using options, \n * appends its element into the DOM (if `el` is provided).\n * And returns the view instance.\n * @static\n * @param {object} options The view options.\n * @param {node} el Dom element to append the view element.\n * @param {boolean} hydrate If true, the view will use existing html.\n * @return {Rasti.Component}\n */;\n Component.mount = function mount() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var el = arguments.length > 1 ? arguments[1] : undefined;\n var hydrate = arguments.length > 2 ? arguments[2] : undefined;\n // Instantiate view.\n var view = new this(options);\n // If `el` is passed, mount component.\n if (el) {\n if (hydrate) {\n view.toString();\n } else {\n var fragment = document.createElement('template');\n // Add html text into element inner html.\n fragment.innerHTML = view;\n // Add to dom.\n el.appendChild(fragment.content);\n }\n view.hydrate(el);\n }\n // Return view instance.\n return view;\n }\n /**\n * Takes a tagged template containing an HTML string, \n * and returns a new `Component` class.\n * - The template outer tag and attributes will be used to create the view's root element.\n * - Boolean attributes should be passed in the form of `attribute=\"${() => true}\"`.\n * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a css selector. The event will be delegated to the view's root element.\n * - The template inner HTML will be used as the view's template.\n * - Template interpolations that are functions will be evaluated on the render process. Receiving the view instance as argument. And being bound to it.\n * - If the function returns `null`, `undefined`, `false` or empty string, the interpolation won't render any content.\n * - If the function returns a component instance, it will be added as a child component.\n * - If the function returns an array, each item will be evaluated as above.\n * @static\n * @param {string} HTML template for the component.\n * @return {Rasti.Component}\n */;\n Component.create = function create(strings) {\n for (var _len2 = arguments.length, expressions = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n expressions[_key2 - 1] = arguments[_key2];\n }\n var parts = [];\n // Replace functions and objects interpolations with `{number}`.\n // Where `number` is the index on expressions array.\n strings.forEach(function (string, i) {\n // Add string part.\n parts.push(string);\n // Add expression placeholder for later or expression eval.\n if (expressions[i]) {\n parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? Component.EXPRESSION_PLACEHOLDER_TEMPLATE(i) : expressions[i]);\n }\n });\n // Create output text for main template.\n var main = parts.join('').trim().replace(/\\n/g, '');\n // Extract outer tag, attributes and inner html.\n var result = main.match(/^<([a-z]+)(.*?)>(.*)<\\/\\1>$/) || main.match(/^<([a-z]+)(.*?)\\/>$/);\n // Parse attributes from html text into an object.\n var attributes = extractAttributes(result[2]);\n // Events to be delegated.\n var events = {};\n // Filter events. To generate events object.\n // Generate attributes object, replace placeholders with expressions.\n attributes = Object.keys(attributes).reduce(function (out, key) {\n // Is Event?\n var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);\n // Is placeholder for function or object?\n // Get expression or value.\n var value = getExpression(attributes[key], expressions);\n // Is event handler. Add to events object.\n if (matchKey && matchKey[1]) {\n var eventType = matchKey[1].toLowerCase();\n Object.keys(value).forEach(function (selector) {\n return events[\"\" + eventType + (selector === '&' ? '' : \" \" + selector)] = value[selector];\n });\n return out;\n }\n // Is attribute. Add to attributes object.\n out[key] = value;\n return out;\n }, {});\n var Current = this;\n // Create subclass for this component.\n return Current.extend({\n // Set events.\n events: events,\n // Set attributes.\n attributes: attributes,\n // Set template.\n template: {\n // Template for innerHTML of root element.\n inner: result[3],\n // Template expressions.\n expressions: expressions\n },\n // Set root element tag.\n tag: result[1]\n });\n };\n return Component;\n}(_View2[\"default\"]);\nexports[\"default\"] = Component;\nComponent.ID_TEMPLATE = function (uid) {\n return \"rasti-component-\" + uid;\n};\nComponent.EXPRESSION_PLACEHOLDER_TEMPLATE = function (idx) {\n return \"__RASTI_EXPRESSION{\" + idx + \"}\";\n};\nComponent.TRUE_PLACEHOLDER = '__RASTI_TRUE';\nComponent.FALSE_PLACEHOLDER = '__RASTI_FALSE';\n\n//# sourceURL=webpack://Rasti/./src/Component.js?");
|
|
29
|
+
eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _View2 = _interopRequireDefault(__webpack_require__(/*! ./View.js */ \"./src/View.js\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n// This options keys will be extended on view instance.\nvar componentOptions = {\n key: true,\n state: true,\n onCreate: true,\n onChange: true,\n onRender: true\n};\n\n/*\n * Helper function. Extract attributes from html tag\n * @param text {string} html text\n * @return {object} Object with keys / values representing attributes.\n */\nvar extractAttributes = function extractAttributes(text) {\n var attributes = {};\n var re = /([\\w|data-]+)(?:=[\"']?((?:.(?![\"']?\\s+(?:\\S+)=|\\s*\\/?[>\"']))+.)[\"']?)?/g;\n var result;\n while ((result = re.exec(text)) !== null) {\n attributes[result[1]] = typeof result[2] === 'undefined' ? true : result[2];\n }\n return attributes;\n};\n\n/*\n * Helper function. If first arg is a placeholder for an expression, return the expression.\n */\nvar getExpression = function getExpression(placeholder, expressions) {\n var match = placeholder && placeholder.match && placeholder.match(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)')));\n return match && match[1] ? expressions[match[1]] : placeholder;\n};\n\n/*\n * Helper function. If expression is a function, call it with context and args.\n */\nvar evalExpression = function evalExpression(expression, context) {\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n return typeof expression === 'function' ? expression.apply(context, args) : expression;\n};\n\n/**\n * Components are a special kind of `View` that is designed to be easily composable, \n * making it simple to add child views and build complex user interfaces.<br />\n * Unlike views, which are render-agnostic, components have a specific set of rendering \n * guidelines that allow for a more declarative development style.<br />\n * Components are defined with the `create` static method, which takes a tagged template.\n * @module\n * @extends Rasti.View\n * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.\n * @property {string} key A unique key to identify the component. Used to recycle child components.\n * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic.\n * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state.\n * @example\n * import { Component, Model } from 'rasti';\n * // Create Timer component.\n * const Timer = Component.create`\n * <div>\n * Seconds: <span>${({ model }) => model.seconds}</span>\n * </div>\n * `;\n * // Create model to store seconds.\n * const model = new Model({ seconds: 0 });\n * // Mount timer on body.\n * Timer.mount({ model }, document.body);\n * // Increment `model.seconds` every second.\n * setInterval(() => model.seconds++, 1000);\n */\nvar Component = /*#__PURE__*/function (_View) {\n _inheritsLoose(Component, _View);\n function Component() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _this = _View.call(this, options) || this;\n // Extend \"this\" with options, mapping componentOptions keys.\n Object.keys(options).forEach(function (key) {\n if (componentOptions[key]) _this[key] = options[key];\n });\n // Store options by default.\n _this.options = options;\n // Ensure id.\n _this.id = _this.attributes.id ?\n // If id is provided, evaluate it.\n evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :\n // Generate a unique id and set it as id attribute.\n Component.ID_TEMPLATE(_this.uid);\n // Bind onChange to this to be used as listener.\n // Store bound version, so it can be removed on onDestroy method.\n _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));\n // Listen to model changes and call onChange.\n if (_this.model) _this.model.on('change', _this.onChange);\n if (_this.state) _this.state.on('change', _this.onChange);\n // Call life cycle method.\n _this.onCreate.apply(_assertThisInitialized(_this), arguments);\n return _this;\n }\n\n /*\n * Override. We don't want to ensure an element on instantiation.\n * We will provide it later.\n */\n var _proto = Component.prototype;\n _proto.ensureElement = function ensureElement() {\n // If el is provided, delegate events.\n if (this.el) this.delegateEvents();\n }\n\n /*\n * Find view's element on parent node, using id.\n */;\n _proto.findElement = function findElement(parent) {\n return (parent || document).querySelector(\"#\" + this.id);\n }\n\n /*\n * Eval attributes expressions.\n */;\n _proto.getAttributes = function getAttributes() {\n var _this2 = this;\n var add = {};\n var remove = {};\n var attrs = [];\n Object.keys(this.attributes).forEach(function (key) {\n if (key === 'id') return;\n // Evaluate attribute value.\n var value = evalExpression(_this2.attributes[key], _this2, _this2);\n\n // Transform bool attribute values\n if (value === false) {\n remove[key] = true;\n } else if (value === true) {\n add[key] = '';\n attrs.push(key);\n } else {\n if (value === null || typeof value === 'undefined') value = '';\n add[key] = value;\n attrs.push(key + \"=\\\"\" + value + \"\\\"\");\n }\n });\n add.id = this.id;\n attrs.push(\"id=\\\"\" + this.id + \"\\\"\");\n return {\n add: add,\n remove: remove,\n html: attrs.join(' ')\n };\n }\n\n /*\n * Used internally on the render process.\n * Attach the view to the dom element.\n */;\n _proto.hydrate = function hydrate(parent) {\n var _this3 = this;\n this.el = this.findElement(parent);\n this.delegateEvents();\n this.children.forEach(function (child) {\n return child.hydrate(_this3.el);\n });\n this.onRender.call(this, 'hydrate');\n }\n\n /*\n * Used internally on the render process.\n * Reuse a view that has `key` when its parent is rendered.\n */;\n _proto.recycle = function recycle(parent) {\n // Find element to be replaced. It has same id.\n var toBeReplaced = this.findElement(parent);\n // Replace it with this.el.\n toBeReplaced.replaceWith(this.el);\n // Call `onRender` lifecycle method.\n this.onRender.call(this, 'recycle');\n }\n\n /*\n * Override. Add some custom logic to super `destroy` method.\n */;\n _proto.destroy = function destroy() {\n _View.prototype.destroy.apply(this, arguments);\n // Stop listening to `change`.\n // Set destroyed flag to prevent a last render after destroyed. TODO: Review\n if (this.model) this.model.off('change', this.onChange);\n if (this.state) this.state.off('change', this.onChange);\n this.destroyed = true;\n }\n\n /**\n * Lifecycle method. Called when the view is created at the end of the constructor.\n * @param options {object} The view options.\n */;\n _proto.onCreate = function onCreate() {}\n\n /**\n * Lifecycle method. Called when model emits `change` event.\n * By default calls render method.\n * This method should be extended with custom logic.\n * Maybe comparing new attributes with previous ones and calling\n * render when needed. Or doing some dom transformation.\n * @param model {Rasti.Model} The model that emitted the event.\n * @param key {string} The key that changed.\n * @param value {any} The new value.\n */;\n _proto.onChange = function onChange() {\n this.render();\n }\n\n /**\n * Lifecycle method. Called when the view is rendered.\n * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.\n */;\n _proto.onRender = function onRender() {}\n\n /**\n * Lifecycle method. Called when the view is destroyed.\n * @param {object} options Options object or any arguments passed to `destroy` method.\n */;\n _proto.onDestroy = function onDestroy() {}\n\n /*\n * Replace expressions.\n */;\n _proto.replaceExpressions = function replaceExpressions(string, addChild) {\n var _this4 = this;\n return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)'), 'g'), function (match) {\n var expression = getExpression(match, _this4.template.expressions);\n // Eval expression. Pass view as argument.\n var result = evalExpression(expression, _this4, _this4);\n // Treat all expressions as arrays.\n var results = result instanceof Array ? result : [result];\n // Replace expression with the result of the evaluation.\n return results.reduce(function (out, result) {\n var parsed;\n // If result is true, replace it with a placeholder.\n if (result === true) parsed = Component.TRUE_PLACEHOLDER;\n // If result is false, replace it with a placeholder.\n else if (result === false) parsed = Component.FALSE_PLACEHOLDER;\n // Replace null or undefined with empty string.\n else if (result === null || typeof result === 'undefined') parsed = '';\n // If result is a view, call addChild callback.\n else if (result && typeof result.render === 'function') parsed = addChild(result);\n // Return expression itself.\n else parsed = result;\n // Concatenate expressions.\n return out + parsed;\n }, '');\n })\n // Replace `attribute=\"true\"` with `attribute`\n .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.TRUE_PLACEHOLDER + \"[\\\"|']\", 'g'), '$1')\n // Replace `attribute=\"false\"` with empty string.\n .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.FALSE_PLACEHOLDER + \"[\\\"|']\", 'g'), '')\n // Replace rest of false expressions with empty string.\n .replace(new RegExp(Component.FALSE_PLACEHOLDER, 'g'), '');\n }\n\n /*\n * Treat the whole view as a HTML string.\n */;\n _proto.toString = function toString() {\n var _this5 = this;\n // Normally there won't be any children, but if there are, destroy them.\n this.destroyChildren();\n // Replace expressions.\n var inner = this.template.inner && this.replaceExpressions(this.template.inner, function (component) {\n // Add child component.\n return _this5.addChild(component);\n });\n // Generate outer template.\n return inner ? \"<\" + this.tag + \" \" + this.getAttributes().html + \">\" + inner + \"</\" + this.tag + \">\" : \"<\" + this.tag + \" \" + this.getAttributes().html + \" />\";\n }\n\n /*\n * View render method.\n */;\n _proto.render = function render() {\n var _this6 = this;\n // Prevent a last re render if view is already destroyed.\n if (this.destroyed) return this;\n // If `this.el` is not present, create a new `this.tag` element.\n if (!this.el) {\n this.el = this.createElement(this.tag);\n this.delegateEvents();\n }\n // Set `this.el` attributes.\n var attributes = this.getAttributes();\n // Remove attributes.\n Object.keys(attributes.remove).forEach(function (key) {\n _this6.el.removeAttribute(key);\n });\n // Add attributes.\n Object.keys(attributes.add).forEach(function (key) {\n _this6.el.setAttribute(key, attributes.add[key]);\n });\n // Check for `template.inner` to see if view has innerHTML.\n if (this.template.inner) {\n var previousChildren = this.children;\n this.children = [];\n var nextChildren = [];\n var recycledChildren = [];\n // Store active element.\n var activeElement = document.activeElement;\n // Replace expressions. Set html inside of `this.el`.\n this.el.innerHTML = this.replaceExpressions(this.template.inner, function (component) {\n var out = component;\n // Check if child already exists.\n var found = component.key && previousChildren.find(function (previousChild) {\n return previousChild.key === component.key;\n });\n if (found) {\n // If child already exists, replace it html by its root element.\n out = \"<\" + found.tag + \" id=\\\"\" + found.id + \"\\\"></\" + found.tag + \">\";\n // Add child to recycled children.\n recycledChildren.push(found);\n // Destroy new child component. Use recycled one instead.\n component.destroy();\n } else {\n // Not found. Add new child component.\n nextChildren.push(component);\n }\n // Component html.\n return out;\n });\n // Add new children. Hydrate them.\n nextChildren.forEach(function (nextChild) {\n _this6.addChild(nextChild).hydrate(_this6.el);\n });\n // Replace children root elements with recycled components.\n recycledChildren.forEach(function (recycledChild) {\n _this6.addChild(recycledChild).recycle(_this6.el);\n });\n // Destroy unused children.\n previousChildren.forEach(function (previousChild) {\n var found = recycledChildren.indexOf(previousChild) > -1;\n if (!found) previousChild.destroy();\n });\n // Restore focus.\n if (this.el.contains(activeElement)) {\n activeElement.focus();\n }\n }\n // Call onRender lifecycle method.\n this.onRender.call(this, 'render');\n // Return this for chaining.\n return this;\n }\n\n /**\n * Helper method used to extend a `Component`, creating a subclass.\n * @static\n * @param {object} object Object containing methods to be added to the new `Component` subclass. Also can be a function that receives the parent prototype and returns an object.\n */;\n Component.extend = function extend(object) {\n var Current = this;\n var Extended = /*#__PURE__*/function (_Current) {\n _inheritsLoose(Extended, _Current);\n function Extended() {\n return _Current.apply(this, arguments) || this;\n }\n return Extended;\n }(Current);\n Object.assign(Extended.prototype, typeof object === 'function' ? object(Current.prototype) : object);\n return Extended;\n }\n\n /**\n * Mount the component into the dom.\n * It instantiate the Component view using options, \n * appends its element into the DOM (if `el` is provided).\n * And returns the view instance.\n * @static\n * @param {object} options The view options.\n * @param {node} el Dom element to append the view element.\n * @param {boolean} hydrate If true, the view will use existing html.\n * @return {Rasti.Component}\n */;\n Component.mount = function mount() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var el = arguments.length > 1 ? arguments[1] : undefined;\n var hydrate = arguments.length > 2 ? arguments[2] : undefined;\n // Instantiate view.\n var view = new this(options);\n // If `el` is passed, mount component.\n if (el) {\n if (hydrate) {\n view.toString();\n } else {\n var fragment = document.createElement('template');\n // Add html text into element inner html.\n fragment.innerHTML = view;\n // Add to dom.\n el.appendChild(fragment.content);\n }\n view.hydrate(el);\n }\n // Return view instance.\n return view;\n }\n /**\n * Takes a tagged template containing an HTML string, \n * and returns a new `Component` class.\n * - The template outer tag and attributes will be used to create the view's root element.\n * - Boolean attributes should be passed in the form of `attribute=\"${() => true}\"`.\n * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a css selector. The event will be delegated to the view's root element.\n * - The template inner HTML will be used as the view's template.\n * - Template interpolations that are functions will be evaluated on the render process. Receiving the view instance as argument. And being bound to it.\n * - If the function returns `null`, `undefined`, `false` or empty string, the interpolation won't render any content.\n * - If the function returns a component instance, it will be added as a child component.\n * - If the function returns an array, each item will be evaluated as above.\n * @static\n * @param {string} HTML template for the component.\n * @return {Rasti.Component}\n */;\n Component.create = function create(strings) {\n for (var _len2 = arguments.length, expressions = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n expressions[_key2 - 1] = arguments[_key2];\n }\n var parts = [];\n // Replace functions and objects interpolations with `{number}`.\n // Where `number` is the index on expressions array.\n strings.forEach(function (string, i) {\n // Add string part.\n parts.push(string);\n // Add expression placeholder for later or expression eval.\n if (expressions[i]) {\n parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? Component.EXPRESSION_PLACEHOLDER_TEMPLATE(i) : expressions[i]);\n }\n });\n // Create output text for main template.\n var main = parts.join('').trim().replace(/\\n/g, '');\n // Extract outer tag, attributes and inner html.\n var result = main.match(/^<([a-z]+)(.*?)>(.*)<\\/\\1>$/) || main.match(/^<([a-z]+)(.*?)\\/>$/);\n // Parse attributes from html text into an object.\n var attributes = extractAttributes(result[2]);\n // Events to be delegated.\n var events = {};\n // Filter events. To generate events object.\n // Generate attributes object, replace placeholders with expressions.\n attributes = Object.keys(attributes).reduce(function (out, key) {\n // Is Event?\n var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);\n // Is placeholder for function or object?\n // Get expression or value.\n var value = getExpression(attributes[key], expressions);\n // Is event handler. Add to events object.\n if (matchKey && matchKey[1]) {\n var eventType = matchKey[1].toLowerCase();\n Object.keys(value).forEach(function (selector) {\n return events[\"\" + eventType + (selector === '&' ? '' : \" \" + selector)] = value[selector];\n });\n return out;\n }\n // Is attribute. Add to attributes object.\n out[key] = value;\n return out;\n }, {});\n var Current = this;\n // Create subclass for this component.\n return Current.extend({\n // Set events.\n events: events,\n // Set attributes.\n attributes: attributes,\n // Set template.\n template: {\n // Template for innerHTML of root element.\n inner: result[3],\n // Template expressions.\n expressions: expressions\n },\n // Set root element tag.\n tag: result[1]\n });\n };\n return Component;\n}(_View2[\"default\"]);\nexports[\"default\"] = Component;\nComponent.ID_TEMPLATE = function (uid) {\n return \"rasti-component-\" + uid;\n};\nComponent.EXPRESSION_PLACEHOLDER_TEMPLATE = function (idx) {\n return \"__RASTI_EXPRESSION{\" + idx + \"}\";\n};\nComponent.TRUE_PLACEHOLDER = '__RASTI_TRUE';\nComponent.FALSE_PLACEHOLDER = '__RASTI_FALSE';\n\n//# sourceURL=webpack://Rasti/./src/Component.js?");
|
|
30
30
|
|
|
31
31
|
/***/ }),
|
|
32
32
|
|
package/dist/rasti.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Rasti=e():t.Rasti=e()}(self,(()=>(()=>{"use strict";var t={252:(t,e,n)=>{e.__esModule=!0,e.default=void 0;var r,i=(r=n(789))&&r.__esModule?r:{default:r};function o(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,a(t,e)}function a(t,e){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},a(t,e)}var u={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0},c=function(t,e){var n=t&&t.match&&t.match(new RegExp(l.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)")));return n&&n[1]?e[n[1]]:t},h=function(t,e){for(var n=arguments.length,r=new Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];return"function"==typeof t?t.apply(e,r):t},l=function(t){function e(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return n=t.call(this,r)||this,Object.keys(r).forEach((function(t){u[t]&&(n[t]=r[t])})),n.options=r,n.id=n.attributes.id?h(n.attributes.id,o(n),o(n)):e.ID_TEMPLATE(n.uid),n.onChange=n.onChange.bind(o(n)),n.model&&n.model.on("change",n.onChange),n.state&&n.state.on("change",n.onChange),n.onCreate.apply(o(n),arguments),n}s(e,t);var n=e.prototype;return n.ensureElement=function(){this.el&&this.delegateEvents()},n.findElement=function(t){return(t||document).querySelector("#"+this.id)},n.getAttributes=function(){var t=this,e={},n={},r=[];return Object.keys(this.attributes).forEach((function(i){if("id"!==i){var o=h(t.attributes[i],t,t);!1===o?n[i]=!0:!0===o?(e[i]="",r.push(i)):(e[i]=o,r.push(i+'="'+o+'"'))}})),e.id=this.id,r.push('id="'+this.id+'"'),{add:e,remove:n,html:r.join(" ")}},n.hydrate=function(t){var e=this;this.el=this.findElement(t),this.delegateEvents(),this.children.forEach((function(t){return t.hydrate(e.el)})),this.onRender.call(this,"hydrate")},n.recycle=function(t){this.findElement(t).replaceWith(this.el),this.onRender.call(this,"recycle")},n.destroy=function(){t.prototype.destroy.apply(this,arguments),this.model&&this.model.off("change",this.onChange),this.state&&this.state.off("change",this.onChange),this.destroyed=!0},n.onCreate=function(){},n.onChange=function(){this.render()},n.onRender=function(){},n.onDestroy=function(){},n.replaceExpressions=function(t,n){var r=this;return t.replace(new RegExp(e.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)"),"g"),(function(t){var i=c(t,r.template.expressions),o=h(i,r,r);return(o instanceof Array?o:[o]).reduce((function(t,r){return t+(!0===r?e.TRUE_PLACEHOLDER:!1===r?e.FALSE_PLACEHOLDER:null==r?"":r&&"function"==typeof r.render?n(r):r)}),"")})).replace(new RegExp("([a-z]+)=[\"|']"+e.TRUE_PLACEHOLDER+"[\"|']","g"),"$1").replace(new RegExp("([a-z]+)=[\"|']"+e.FALSE_PLACEHOLDER+"[\"|']","g"),"").replace(new RegExp(e.FALSE_PLACEHOLDER,"g"),"")},n.toString=function(){var t=this;this.destroyChildren();var e=this.template.inner&&this.replaceExpressions(this.template.inner,(function(e){return t.addChild(e)}));return e?"<"+this.tag+" "+this.getAttributes().html+">"+e+"</"+this.tag+">":"<"+this.tag+" "+this.getAttributes().html+" />"},n.render=function(){var t=this;if(this.destroyed)return this;this.el||(this.el=this.createElement(this.tag),this.delegateEvents());var e=this.getAttributes();if(Object.keys(e.remove).forEach((function(e){t.el.removeAttribute(e)})),Object.keys(e.add).forEach((function(n){t.el.setAttribute(n,e.add[n])})),this.template.inner){var n=this.children;this.children=[];var r=[],i=[],o=document.activeElement;this.el.innerHTML=this.replaceExpressions(this.template.inner,(function(t){var e=t,o=t.key&&n.find((function(e){return e.key===t.key}));return o?(e="<"+o.tag+' id="'+o.id+'"></'+o.tag+">",i.push(o),t.destroy()):r.push(t),e})),r.forEach((function(e){t.addChild(e).hydrate(t.el)})),i.forEach((function(e){t.addChild(e).recycle(t.el)})),n.forEach((function(t){i.indexOf(t)>-1||t.destroy()})),this.el.contains(o)&&o.focus()}return this.onRender.call(this,"render"),this},e.extend=function(t){var e=function(t){function e(){return t.apply(this,arguments)||this}return s(e,t),e}(this);return Object.assign(e.prototype,"function"==typeof t?t(this.prototype):t),e},e.mount=function(){var t=arguments.length>1?arguments[1]:void 0,e=arguments.length>2?arguments[2]:void 0,n=new this(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{});if(t){if(e)n.toString();else{var r=document.createElement("template");r.innerHTML=n,t.appendChild(r.content)}n.hydrate(t)}return n},e.create=function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];var o=[];t.forEach((function(t,n){o.push(t),r[n]&&o.push("function"==typeof r[n]||"object"==typeof r[n]?e.EXPRESSION_PLACEHOLDER_TEMPLATE(n):r[n])}));var s=o.join("").trim().replace(/\n/g,""),a=s.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/)||s.match(/^<([a-z]+)(.*?)\/>$/),u=function(t){for(var e,n={},r=/(\w+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;null!==(e=r.exec(t));)n[e[1]]=void 0===e[2]||e[2];return n}(a[2]),h={};return u=Object.keys(u).reduce((function(t,e){var n=e.match(/on(([A-Z]{1}[a-z]+)+)/),i=c(u[e],r);if(n&&n[1]){var o=n[1].toLowerCase();return Object.keys(i).forEach((function(t){return h[o+("&"===t?"":" "+t)]=i[t]})),t}return t[e]=i,t}),{}),this.extend({events:h,attributes:u,template:{inner:a[3],expressions:r},tag:a[1]})},e}(i.default);e.default=l,l.ID_TEMPLATE=function(t){return"rasti-component-"+t},l.EXPRESSION_PLACEHOLDER_TEMPLATE=function(t){return"__RASTI_EXPRESSION{"+t+"}"},l.TRUE_PLACEHOLDER="__RASTI_TRUE",l.FALSE_PLACEHOLDER="__RASTI_FALSE"},30:(t,e)=>{e.__esModule=!0,e.default=void 0;var n=function(){function t(){}var e=t.prototype;return e.on=function(t,e){if("function"!=typeof e)throw TypeError("Listener must be a function");this.listeners||(this.listeners={}),this.listeners[t]||(this.listeners[t]=[]),this.listeners[t].push(e)},e.once=function(t,e){if("function"==typeof e){var n=this,r=e;e=function(){r.apply(void 0,arguments),n.off(t,e)}}this.on(t,e)},e.off=function(t,e){if(t)if(e){var n=this.listeners[t];n&&(n.slice().forEach((function(t,r){t===e&&n.splice(r,1)})),n.length||delete this.listeners[t])}else delete this.listeners[t];else this.listeners={}},e.emit=function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];var i=this.listeners&&this.listeners[t];i&&i.length&&i.slice().forEach((function(t){t.apply(void 0,n)}))},t}();e.default=n},289:(t,e,n)=>{var r;function i(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}e.__esModule=!0,e.default=void 0;var s=function(t){var e,n;function r(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(e=t.call(this)||this).preinitialize.apply(i(e),arguments),e.attributes=Object.assign({},e.defaults||{},n),e.previous={},Object.keys(e.attributes).forEach(e.defineAttribute.bind(i(e))),e}n=t,(e=r).prototype=Object.create(n.prototype),e.prototype.constructor=e,o(e,n);var s=r.prototype;return s.preinitialize=function(){},s.defineAttribute=function(t){var e=this;Object.defineProperty(this,t,{get:function(){return e.get(t)},set:function(n){e.set(t,n)}})},s.get=function(t){return this.attributes[t]},s.set=function(t,e){var n,r=this,i="object"==typeof t?t:((n={})[t]=e,n);return Object.keys(i).forEach((function(t){var e=t in r.attributes&&i[t]!==r.attributes[t];r.previous[t]=r.attributes[t],r.attributes[t]=i[t],e&&(r.emit("change",r,t,i[t]),r.emit("change:"+t,r,i[t]))})),this},s.toJSON=function(){return this.attributes},r}(((r=n(30))&&r.__esModule?r:{default:r}).default);e.default=s},789:(t,e,n)=>{e.__esModule=!0,e.default=void 0;var r,i=(r=n(30))&&r.__esModule?r:{default:r};function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}var s={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0},a=function(t){var e,n;function r(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(e=t.call(this)||this).preinitialize.apply(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e),arguments),e.uid="uid"+ ++r.uid,e.delegatedEventListeners=[],e.children=[],Object.keys(n).forEach((function(t){s[t]&&(e[t]=n[t])})),e.ensureElement(),e}n=t,(e=r).prototype=Object.create(n.prototype),e.prototype.constructor=e,o(e,n);var i=r.prototype;return i.preinitialize=function(){},i.$=function(t){return this.el.querySelector(t)},i.$$=function(t){return this.el.querySelectorAll(t)},i.destroy=function(){return this.destroyChildren(),this.undelegateEvents(),this.off(),this.onDestroy.apply(this,arguments),this},i.onDestroy=function(){},i.addChild=function(t){return this.children.push(t),t},i.destroyChildren=function(){for(;this.children.length;)this.children.shift().destroy()},i.ensureElement=function(){this.el||(this.el=this.createElement(this.tag,this.attributes)),this.delegateEvents()},i.createElement=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(t);return Object.keys(e).forEach((function(t){return n.setAttribute(t,e[t])})),n},i.removeElement=function(){this.el.parentNode.removeChild(this.el)},i.delegateEvents=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.events;if(!e)return this;this.delegatedEventListeners.length&&this.undelegateEvents();var n={};return Object.keys(e).forEach((function(r){var i=r.split(" "),o=i.shift(),s=i.join(" "),a=e[r];a=("string"==typeof a?t[a]:a).bind(t),n[o]||(n[o]=[]),n[o].push({selector:s,listener:a})})),Object.keys(n).forEach((function(e){var r=function(r){n[e].forEach((function(e){var n=e.selector,i=e.listener;n&&!r.target.closest(n)||i(r,t)}))};t.delegatedEventListeners.push({type:e,listener:r}),t.el.addEventListener(e,r)})),this},i.undelegateEvents=function(){var t=this;return this.delegatedEventListeners.forEach((function(e){var n=e.type,r=e.listener;t.el.removeEventListener(n,r)})),this.delegatedEventListeners=[],this},i.render=function(){return this.template&&(this.el.innerHTML=this.template(this.model)),this},r}(i.default);e.default=a,a.uid=0}},e={};function n(r){var i=e[r];if(void 0!==i)return i.exports;var o=e[r]={exports:{}};return t[r](o,o.exports,n),o.exports}var r={};return(()=>{var t=r;t.__esModule=!0;var e=a(n(30));t.Emitter=e.default;var i=a(n(289));t.Model=i.default;var o=a(n(789));t.View=o.default;var s=a(n(252));function a(t){return t&&t.__esModule?t:{default:t}}t.Component=s.default})(),r})()));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Rasti=e():t.Rasti=e()}(self,(()=>(()=>{"use strict";var t={252:(t,e,n)=>{e.__esModule=!0,e.default=void 0;var r,i=(r=n(789))&&r.__esModule?r:{default:r};function o(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,a(t,e)}function a(t,e){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},a(t,e)}var u={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0},c=function(t,e){var n=t&&t.match&&t.match(new RegExp(l.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)")));return n&&n[1]?e[n[1]]:t},h=function(t,e){for(var n=arguments.length,r=new Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];return"function"==typeof t?t.apply(e,r):t},l=function(t){function e(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return n=t.call(this,r)||this,Object.keys(r).forEach((function(t){u[t]&&(n[t]=r[t])})),n.options=r,n.id=n.attributes.id?h(n.attributes.id,o(n),o(n)):e.ID_TEMPLATE(n.uid),n.onChange=n.onChange.bind(o(n)),n.model&&n.model.on("change",n.onChange),n.state&&n.state.on("change",n.onChange),n.onCreate.apply(o(n),arguments),n}s(e,t);var n=e.prototype;return n.ensureElement=function(){this.el&&this.delegateEvents()},n.findElement=function(t){return(t||document).querySelector("#"+this.id)},n.getAttributes=function(){var t=this,e={},n={},r=[];return Object.keys(this.attributes).forEach((function(i){if("id"!==i){var o=h(t.attributes[i],t,t);!1===o?n[i]=!0:!0===o?(e[i]="",r.push(i)):(null==o&&(o=""),e[i]=o,r.push(i+'="'+o+'"'))}})),e.id=this.id,r.push('id="'+this.id+'"'),{add:e,remove:n,html:r.join(" ")}},n.hydrate=function(t){var e=this;this.el=this.findElement(t),this.delegateEvents(),this.children.forEach((function(t){return t.hydrate(e.el)})),this.onRender.call(this,"hydrate")},n.recycle=function(t){this.findElement(t).replaceWith(this.el),this.onRender.call(this,"recycle")},n.destroy=function(){t.prototype.destroy.apply(this,arguments),this.model&&this.model.off("change",this.onChange),this.state&&this.state.off("change",this.onChange),this.destroyed=!0},n.onCreate=function(){},n.onChange=function(){this.render()},n.onRender=function(){},n.onDestroy=function(){},n.replaceExpressions=function(t,n){var r=this;return t.replace(new RegExp(e.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)"),"g"),(function(t){var i=c(t,r.template.expressions),o=h(i,r,r);return(o instanceof Array?o:[o]).reduce((function(t,r){return t+(!0===r?e.TRUE_PLACEHOLDER:!1===r?e.FALSE_PLACEHOLDER:null==r?"":r&&"function"==typeof r.render?n(r):r)}),"")})).replace(new RegExp("([a-z]+)=[\"|']"+e.TRUE_PLACEHOLDER+"[\"|']","g"),"$1").replace(new RegExp("([a-z]+)=[\"|']"+e.FALSE_PLACEHOLDER+"[\"|']","g"),"").replace(new RegExp(e.FALSE_PLACEHOLDER,"g"),"")},n.toString=function(){var t=this;this.destroyChildren();var e=this.template.inner&&this.replaceExpressions(this.template.inner,(function(e){return t.addChild(e)}));return e?"<"+this.tag+" "+this.getAttributes().html+">"+e+"</"+this.tag+">":"<"+this.tag+" "+this.getAttributes().html+" />"},n.render=function(){var t=this;if(this.destroyed)return this;this.el||(this.el=this.createElement(this.tag),this.delegateEvents());var e=this.getAttributes();if(Object.keys(e.remove).forEach((function(e){t.el.removeAttribute(e)})),Object.keys(e.add).forEach((function(n){t.el.setAttribute(n,e.add[n])})),this.template.inner){var n=this.children;this.children=[];var r=[],i=[],o=document.activeElement;this.el.innerHTML=this.replaceExpressions(this.template.inner,(function(t){var e=t,o=t.key&&n.find((function(e){return e.key===t.key}));return o?(e="<"+o.tag+' id="'+o.id+'"></'+o.tag+">",i.push(o),t.destroy()):r.push(t),e})),r.forEach((function(e){t.addChild(e).hydrate(t.el)})),i.forEach((function(e){t.addChild(e).recycle(t.el)})),n.forEach((function(t){i.indexOf(t)>-1||t.destroy()})),this.el.contains(o)&&o.focus()}return this.onRender.call(this,"render"),this},e.extend=function(t){var e=function(t){function e(){return t.apply(this,arguments)||this}return s(e,t),e}(this);return Object.assign(e.prototype,"function"==typeof t?t(this.prototype):t),e},e.mount=function(){var t=arguments.length>1?arguments[1]:void 0,e=arguments.length>2?arguments[2]:void 0,n=new this(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{});if(t){if(e)n.toString();else{var r=document.createElement("template");r.innerHTML=n,t.appendChild(r.content)}n.hydrate(t)}return n},e.create=function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];var o=[];t.forEach((function(t,n){o.push(t),r[n]&&o.push("function"==typeof r[n]||"object"==typeof r[n]?e.EXPRESSION_PLACEHOLDER_TEMPLATE(n):r[n])}));var s=o.join("").trim().replace(/\n/g,""),a=s.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/)||s.match(/^<([a-z]+)(.*?)\/>$/),u=function(t){for(var e,n={},r=/([\w|data-]+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;null!==(e=r.exec(t));)n[e[1]]=void 0===e[2]||e[2];return n}(a[2]),h={};return u=Object.keys(u).reduce((function(t,e){var n=e.match(/on(([A-Z]{1}[a-z]+)+)/),i=c(u[e],r);if(n&&n[1]){var o=n[1].toLowerCase();return Object.keys(i).forEach((function(t){return h[o+("&"===t?"":" "+t)]=i[t]})),t}return t[e]=i,t}),{}),this.extend({events:h,attributes:u,template:{inner:a[3],expressions:r},tag:a[1]})},e}(i.default);e.default=l,l.ID_TEMPLATE=function(t){return"rasti-component-"+t},l.EXPRESSION_PLACEHOLDER_TEMPLATE=function(t){return"__RASTI_EXPRESSION{"+t+"}"},l.TRUE_PLACEHOLDER="__RASTI_TRUE",l.FALSE_PLACEHOLDER="__RASTI_FALSE"},30:(t,e)=>{e.__esModule=!0,e.default=void 0;var n=function(){function t(){}var e=t.prototype;return e.on=function(t,e){if("function"!=typeof e)throw TypeError("Listener must be a function");this.listeners||(this.listeners={}),this.listeners[t]||(this.listeners[t]=[]),this.listeners[t].push(e)},e.once=function(t,e){if("function"==typeof e){var n=this,r=e;e=function(){r.apply(void 0,arguments),n.off(t,e)}}this.on(t,e)},e.off=function(t,e){if(t)if(e){var n=this.listeners[t];n&&(n.slice().forEach((function(t,r){t===e&&n.splice(r,1)})),n.length||delete this.listeners[t])}else delete this.listeners[t];else this.listeners={}},e.emit=function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];var i=this.listeners&&this.listeners[t];i&&i.length&&i.slice().forEach((function(t){t.apply(void 0,n)}))},t}();e.default=n},289:(t,e,n)=>{var r;function i(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}e.__esModule=!0,e.default=void 0;var s=function(t){var e,n;function r(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(e=t.call(this)||this).preinitialize.apply(i(e),arguments),e.attributes=Object.assign({},e.defaults||{},n),e.previous={},Object.keys(e.attributes).forEach(e.defineAttribute.bind(i(e))),e}n=t,(e=r).prototype=Object.create(n.prototype),e.prototype.constructor=e,o(e,n);var s=r.prototype;return s.preinitialize=function(){},s.defineAttribute=function(t){var e=this;Object.defineProperty(this,t,{get:function(){return e.get(t)},set:function(n){e.set(t,n)}})},s.get=function(t){return this.attributes[t]},s.set=function(t,e){var n,r=this,i="object"==typeof t?t:((n={})[t]=e,n);return Object.keys(i).forEach((function(t){var e=t in r.attributes&&i[t]!==r.attributes[t];r.previous[t]=r.attributes[t],r.attributes[t]=i[t],e&&(r.emit("change",r,t,i[t]),r.emit("change:"+t,r,i[t]))})),this},s.toJSON=function(){return this.attributes},r}(((r=n(30))&&r.__esModule?r:{default:r}).default);e.default=s},789:(t,e,n)=>{e.__esModule=!0,e.default=void 0;var r,i=(r=n(30))&&r.__esModule?r:{default:r};function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}var s={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0},a=function(t){var e,n;function r(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(e=t.call(this)||this).preinitialize.apply(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e),arguments),e.uid="uid"+ ++r.uid,e.delegatedEventListeners=[],e.children=[],Object.keys(n).forEach((function(t){s[t]&&(e[t]=n[t])})),e.ensureElement(),e}n=t,(e=r).prototype=Object.create(n.prototype),e.prototype.constructor=e,o(e,n);var i=r.prototype;return i.preinitialize=function(){},i.$=function(t){return this.el.querySelector(t)},i.$$=function(t){return this.el.querySelectorAll(t)},i.destroy=function(){return this.destroyChildren(),this.undelegateEvents(),this.off(),this.onDestroy.apply(this,arguments),this},i.onDestroy=function(){},i.addChild=function(t){return this.children.push(t),t},i.destroyChildren=function(){for(;this.children.length;)this.children.shift().destroy()},i.ensureElement=function(){this.el||(this.el=this.createElement(this.tag,this.attributes)),this.delegateEvents()},i.createElement=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(t);return Object.keys(e).forEach((function(t){return n.setAttribute(t,e[t])})),n},i.removeElement=function(){this.el.parentNode.removeChild(this.el)},i.delegateEvents=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.events;if(!e)return this;this.delegatedEventListeners.length&&this.undelegateEvents();var n={};return Object.keys(e).forEach((function(r){var i=r.split(" "),o=i.shift(),s=i.join(" "),a=e[r];a=("string"==typeof a?t[a]:a).bind(t),n[o]||(n[o]=[]),n[o].push({selector:s,listener:a})})),Object.keys(n).forEach((function(e){var r=function(r){n[e].forEach((function(e){var n=e.selector,i=e.listener;n&&!r.target.closest(n)||i(r,t)}))};t.delegatedEventListeners.push({type:e,listener:r}),t.el.addEventListener(e,r)})),this},i.undelegateEvents=function(){var t=this;return this.delegatedEventListeners.forEach((function(e){var n=e.type,r=e.listener;t.el.removeEventListener(n,r)})),this.delegatedEventListeners=[],this},i.render=function(){return this.template&&(this.el.innerHTML=this.template(this.model)),this},r}(i.default);e.default=a,a.uid=0}},e={};function n(r){var i=e[r];if(void 0!==i)return i.exports;var o=e[r]={exports:{}};return t[r](o,o.exports,n),o.exports}var r={};return(()=>{var t=r;t.__esModule=!0;var e=a(n(30));t.Emitter=e.default;var i=a(n(289));t.Model=i.default;var o=a(n(789));t.View=o.default;var s=a(n(252));function a(t){return t&&t.__esModule?t:{default:t}}t.Component=s.default})(),r})()));
|
package/es/Component.js
CHANGED
|
@@ -19,7 +19,7 @@ var componentOptions = {
|
|
|
19
19
|
*/
|
|
20
20
|
var extractAttributes = function extractAttributes(text) {
|
|
21
21
|
var attributes = {};
|
|
22
|
-
var re = /(\w+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
|
|
22
|
+
var re = /([\w|data-]+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
|
|
23
23
|
var result;
|
|
24
24
|
while ((result = re.exec(text)) !== null) {
|
|
25
25
|
attributes[result[1]] = typeof result[2] === 'undefined' ? true : result[2];
|
|
@@ -130,6 +130,7 @@ var Component = /*#__PURE__*/function (_View) {
|
|
|
130
130
|
if (key === 'id') return;
|
|
131
131
|
// Evaluate attribute value.
|
|
132
132
|
var value = evalExpression(_this2.attributes[key], _this2, _this2);
|
|
133
|
+
|
|
133
134
|
// Transform bool attribute values
|
|
134
135
|
if (value === false) {
|
|
135
136
|
remove[key] = true;
|
|
@@ -137,6 +138,7 @@ var Component = /*#__PURE__*/function (_View) {
|
|
|
137
138
|
add[key] = '';
|
|
138
139
|
attrs.push(key);
|
|
139
140
|
} else {
|
|
141
|
+
if (value === null || typeof value === 'undefined') value = '';
|
|
140
142
|
add[key] = value;
|
|
141
143
|
attrs.push(key + "=\"" + value + "\"");
|
|
142
144
|
}
|
package/lib/Component.js
CHANGED
|
@@ -23,7 +23,7 @@ var componentOptions = {
|
|
|
23
23
|
*/
|
|
24
24
|
var extractAttributes = function extractAttributes(text) {
|
|
25
25
|
var attributes = {};
|
|
26
|
-
var re = /(\w+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
|
|
26
|
+
var re = /([\w|data-]+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
|
|
27
27
|
var result;
|
|
28
28
|
while ((result = re.exec(text)) !== null) {
|
|
29
29
|
attributes[result[1]] = typeof result[2] === 'undefined' ? true : result[2];
|
|
@@ -134,6 +134,7 @@ var Component = /*#__PURE__*/function (_View) {
|
|
|
134
134
|
if (key === 'id') return;
|
|
135
135
|
// Evaluate attribute value.
|
|
136
136
|
var value = evalExpression(_this2.attributes[key], _this2, _this2);
|
|
137
|
+
|
|
137
138
|
// Transform bool attribute values
|
|
138
139
|
if (value === false) {
|
|
139
140
|
remove[key] = true;
|
|
@@ -141,6 +142,7 @@ var Component = /*#__PURE__*/function (_View) {
|
|
|
141
142
|
add[key] = '';
|
|
142
143
|
attrs.push(key);
|
|
143
144
|
} else {
|
|
145
|
+
if (value === null || typeof value === 'undefined') value = '';
|
|
144
146
|
add[key] = value;
|
|
145
147
|
attrs.push(key + "=\"" + value + "\"");
|
|
146
148
|
}
|
package/package.json
CHANGED
package/src/Component.js
CHANGED
|
@@ -16,7 +16,7 @@ const componentOptions = {
|
|
|
16
16
|
*/
|
|
17
17
|
const extractAttributes = text => {
|
|
18
18
|
const attributes = {};
|
|
19
|
-
const re = /(\w+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
|
|
19
|
+
const re = /([\w|data-]+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
|
|
20
20
|
|
|
21
21
|
let result;
|
|
22
22
|
while ((result = re.exec(text)) !== null) {
|
|
@@ -125,6 +125,7 @@ export default class Component extends View {
|
|
|
125
125
|
if (key === 'id') return;
|
|
126
126
|
// Evaluate attribute value.
|
|
127
127
|
let value = evalExpression(this.attributes[key], this, this);
|
|
128
|
+
|
|
128
129
|
// Transform bool attribute values
|
|
129
130
|
if (value === false) {
|
|
130
131
|
remove[key] = true;
|
|
@@ -132,6 +133,8 @@ export default class Component extends View {
|
|
|
132
133
|
add[key] = '';
|
|
133
134
|
attrs.push(key);
|
|
134
135
|
} else {
|
|
136
|
+
if (value === null || typeof value === 'undefined') value = '';
|
|
137
|
+
|
|
135
138
|
add[key] = value;
|
|
136
139
|
attrs.push(`${key}="${value}"`);
|
|
137
140
|
}
|