Skip to content
This repository has been archived by the owner on Jan 2, 2024. It is now read-only.

Commit

Permalink
Perf & Param queries
Browse files Browse the repository at this point in the history
* Support for parameter queries for handlers
* Performance Pass, increased caching.
  • Loading branch information
Mark Greenwald authored and Mark Greenwald committed Jun 13, 2022
1 parent eaf5e85 commit 69358f5
Show file tree
Hide file tree
Showing 18 changed files with 1,173 additions and 780 deletions.
28 changes: 24 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ declarative, attribute-driven mapping/binding between elements and models.
* Tiny
* Clean
* Declarative
* Unoppinionated
* Unopinionated
* Embraces the Web
* Targets light projects (no overhead, quick startup)

**Cons:**
* Performance: Enough for lightweight projects
* Scalability: Beyond the scope of this project
* Support: Not likely, this was an experiment.
* Support: Unlikely, this was an experiment.

**Problem Being Solved:**

Expand Down Expand Up @@ -59,12 +59,12 @@ document.body.map(model);

**View**
```xml
<div data-onclick="handler">click me</div><!-- equiv to div.onclick = model.handler -->
<div data-onclick="handler(textContent)">click me</div><!-- equiv to div.onclick = model.handler -->
```
**Model**
```javascript
var model = {
handler: e => alert('clicked')
handler: value => alert(value)
}
```
**Bootstrap**
Expand Down Expand Up @@ -219,6 +219,26 @@ document.body.map(model);
```

# Version Notes
* 1.1
* Preformance Pass
* Increased performance at the expense of a bump to caching on elements
* Switched some RegExp to quicker, manual parsing
* Support for parameter selectors
* Selectors can now have parameter statements to define values passed to handlers
* Example: `<input name="field" data-onclick="member1.member2(name, value, value.length)">`
* Added configurability
* attributePrefix: ('data-') The prefix used to identify mapping attributes
* attributeDelimiter: ('-') The character used for separating properties in an attribute name
* memberDelimiter: ('.') The character used for separating properties in a selector
* selectorDelimiter: ('(') The opening character for parameter queries
* parameterDelimiter: (',') The character used for separating parameter queries
* selectorTerminator: (')') The character used marking the end of parameter queries
* Example: `document.body.map(model, {attributePrefix: 'map-'})`
* Breaking changes to ObjectQuery
* Renamed to MemberQuery
* Now creates a compiled selector that can be re-evaluated (vs single evaluation)
* Breaking change to HTMLTemplateElement.prototype.template
* Reading the template in js now returns the data rather than a content clone.
* 1.0.1
* Improved naming
* HTMLElement.prototype.classes -> Element.prototype.class
Expand Down
12 changes: 9 additions & 3 deletions build.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ const fs = require('fs');
const path = require('path');
const {minify} = require('terser');

const package = JSON.parse(fs.readFileSync('./package.json').toString());

const directories = [
'./src/required/',
'./src/optional/'
Expand All @@ -21,13 +23,17 @@ const contents = files

!fs.existsSync('dst') && fs.mkdirSync('dst');

const header = `console.log("https://github.com/DataDink/mvw v${package.version}");`
+ '\n(() => {';
const footer = '})();';

fs.writeFileSync(
'./dst/mvw.js',
`(() => {\n${contents}\n})();`
`${header}${contents}${footer}`
);

minify(contents)
.then(out => fs.writeFileSync(
'./dst/mvw.minified.js',
`(() => {${out.code}})();`)
);
`${header}${out.code}${footer}`
));
Loading

0 comments on commit 69358f5

Please sign in to comment.