deleight - npm Package Compare versions
Comparing version 1.3.1 to 1.3.2
| { | ||
| "name": "deleight", | ||
| "version": "1.3.1", | ||
| "version": "1.3.2", | ||
| "description": "A group of 8 libraries for writing accessible and joyfully interactive web applications with traditional HTML, CSS and JavaScript.", | ||
@@ -5,0 +5,0 @@ "type": "module", |
117
readme.md
@@ -5,19 +5,18 @@ # Deleight | ||
| This is a group of 9 small libraies that simplify web frontend development in vanilla HTML, CSS and JavasSript. Deleight is an inclusive library everyone operating on the web can benefit from. | ||
| This is a group of 10 libraies that simplify web frontend development in vanilla HTML, CSS and JavasSript. Deleight is an inclusive library that everyone operating on the web can benefit from. | ||
| - Frontend JavaScript developers can create apps without worrying about control, modularity or maintainance. Not only is the framework flexible, modular and compact, it also aligns with familiar semantics. You still retain the convenience of a declarative API. | ||
| - Frontend JavaScript developers can create apps without worrying about control, modularity or maintainance. Not only is the framework flexible, modular and compact, it also aligns with familiar semantics. You also have the convenience of a declarative API. | ||
| - Distributed frontend teams can work freely in their favourite languages without worrying about interop. HTML experts can write pure HTML. JavaScript developers can write pure JavaScript. Designers can write pure CSS. Deleight will ensure that everything plays well together. Data can be injected into HTML in multiple ways and it is not compulsory to have code tags or component specifiers in markup. The same thing also applies to style encapsulation. | ||
| - Distributed frontend teams can work freely in their favourite languages without worrying about interop. HTML experts can write pure HTML. JavaScript developers can write pure JavaScript. Designers can write pure CSS. Deleight will ensure that everything plays well together. | ||
| - Back-end developers using any technology can stop worrying about front-end complexity. Deleight ships modern ES6 modules which can be loaded directly into webpages. Because the framework is modular and compact, you only load the libraries you need into your pages. You can also compose them with your favourite back-end template engines to reduce the number of files to load. Finally, the [API](https://mksunny1.github.io/deleight-api-docs/main) is small and natural; it is very easy to pick up in a few hours. | ||
| - Ultimately users, (that is _all of us_), will benefit the most when all the industry practitioners have the right tools to be more productive. HTML, JavaScript and CSS are *all* amazinng technologies and we need to emphasize and consolidate this in modern web development. | ||
| Apart from this brief guide and the [API](https://mksunny1.github.io/deleight-api-docs/main) documentation, there are also some examples which can be used to understand how the parts fit together and to develop a feel for using deleight. To play with the exmples, you can run the included server with `npm start` and visit http://localhost:8000/docs/examples/index.html. The demos are also hosted online [here](https://mksunny1.github.io/deleight/docs/examples). | ||
| Apart from this brief guide and the [API](https://mksunny1.github.io/deleight-api-docs/main) documentation, there are also some examples which can be used to understand how the parts fit together and to develop a feel for using deleight. If you want to see the output of the exmples, you can run the included server with `npm start` and visit the 'examples' site at http://localhost:8000/docs/examples/index.html. The site is also hosted online [here](https://mksunny1.github.io/deleight/docs/examples). | ||
| What follows is a brief description of the libraries and how to include them in your projects. | ||
| ## Appliance | ||
| Appliance provides a powerful declarative API for manipulating the DOM and for structuring code. It can be used to attach behavior to HTML elements easily and efficiently. At a basic level it can work similarly to web components without needing to create the elements. This can produce big gains in accessibility and flexibility. When used in tandem with other powerful primitives from `domitory` and `onetomany`, appiance will also match and exceed advanced component and famework functionality, like data-binding, state management and lifecycle hooks. Some things like 'hydration' are even obtained for free. | ||
| Appliance provides a powerful declarative API for manipulating the DOM and for structuring code in JavaScript. It can be used to attach behavior to HTML elements easily and efficiently. It is like custom elements without the DOM building aspects. Here the elements may already exist in the DOM. This can produce big gains in accessibility and flexibility as DOM can be built server-side or client-side using any technology of choice. This can also increase efficient=cy because all the elements can be set up in one call. When used in tandem with other primitives from `actribute`, `domitory` and `onetomany`, appiance will match and exceed advanced 'framework' functionality, like data-binding, state management and lifecycle hooks. Hydration is natural. | ||
@@ -29,3 +28,3 @@ ```js | ||
| // apply used globally on all paragraphs within the containingElement | ||
| // apply used globally on all divs within the containingElement | ||
| function(containingElement) { | ||
@@ -39,5 +38,35 @@ apply({ | ||
| ## Actribute | ||
| Actribute is a versatile library for associating element attributes with JavaScript code. In one instance it can be used as a more widely supported, flexible and powerful alternative to extending built-in HTML elements, using a similar API. In another, it can be used to establish conventions for automatically manipulating the DOM. Think about directives in Angular or Vue. | ||
| ```js | ||
| import { Actribute, props } from 'deleight/actribute'; | ||
| // initialize: | ||
| const fallbackProps = { | ||
| prop1: 'Fallback', prop4: 'Last resort', | ||
| sig: '$2b$20$o7DWuroOjbA/4LDWIstjueW9Hi6unv4fI0xAit7UQfLw/PI8iPl1y' | ||
| }; | ||
| const act = new Actribute(); | ||
| // register components: | ||
| act.register('comp1', (element, attr, ...context) => element.textContent = props(attr.value, context)[0]); | ||
| act.register('comp2', (element, attr) => element.style.left = attr.value); | ||
| // use in markup: | ||
| // <section c-comp1="prop1" c-comp2="100px" > | ||
| // First section | ||
| // </section> | ||
| // process components: | ||
| act.process({el: document.body, ctx: [{prop1: 2, prop3: 2}, fallbackProps]}); | ||
| // unregister a component: | ||
| delete act.registry.comp2; | ||
| ``` | ||
| ## Domitory | ||
| This provides a painless SQLesque API for manipulating the DOM. The library exports `insert`, `set`, `update` and `remove` (`delete` is a keyword in JavaScript) functions for bulk manipulation of things on the DOM. It is an efficient, consistent and simple API to use. See the examples and the API docs. | ||
| This provides a painless SQLesque API for manipulating the DOM. The library exports `insert`, `set`, `update` and `remove` functions for bulk manipulation of things on the DOM. It is an efficient, consistent and simple API to use. See the examples and the API docs. | ||
@@ -49,6 +78,6 @@ ```js | ||
| // set the text content of all selected p elements to its position in the array. We can set as many properties or attributes as we want at once. | ||
| // set the text content of all selected div elements to its position in the array. We can set as many properties or attributes as we want at once. | ||
| function(containingElement) { | ||
| apply({ | ||
| p: (...divs) => set(divs, {textContent: range(divs.length)}) | ||
| div: (...divs) => set(divs, {textContent: range(divs.length)}) | ||
| }, containingElement); | ||
@@ -64,11 +93,10 @@ } | ||
| - composing event handlers | ||
| - creating _lazy_ handlers whose functionality can be injected later | ||
| - creating *lazy* handlers whose functionality can be injected later | ||
| - promoting handler reuse with different elements | ||
| - creating fewer event hanandlers by taking advantage of event bubbling | ||
| - disabling event firing until a running handler completes including handlers that use promises. | ||
| - creating fewer event handlers by taking advantage of event bubbling | ||
| - disabling event firing until a running handler completes and all their promises get resolved. | ||
| - creating handlers for specific key events, like enter. | ||
| - creating reusable handler guards to stop event handling at any point. | ||
| - etc. | ||
| It is the uninteresting but relevant bits. | ||
| ```js | ||
@@ -78,3 +106,3 @@ import { EventListener } from 'deleight/eventivity' | ||
| export const myEventivity = { | ||
| pClickListener: new EventListener((e, runContext) => console.log({e.target, runContext})) | ||
| listener: new EventListener((e, runContext) => console.log({e.target, runContext})) | ||
| }; | ||
@@ -87,3 +115,3 @@ | ||
| This is the API for 'reactivity'. OneToMany exports primitives to help us create and manipulate single objects which function as many objects. OneToMany provides methods for getting and setting properties on multiple objects and methods for invoking multiple functions and object methods. The library is simple, concise, explicit and transparent. | ||
| OneToMany exports primitives to manipulate many objects simultaneously. There are methods for getting and setting properties and invoking functions and object methods. The library is simple, concise, explicit and transparent. | ||
@@ -109,3 +137,3 @@ ```js | ||
| This is a fun library to use if you need to build part or all of your DOM with the help of JavaScript. It includes primitives for template creation, template rendering and document tree building. There are primitives for building the DOM with either in-page resources or dynamically loaded ones. This gives us the flexibility to choose whatever works best for a project. | ||
| This is a fun library to use if you need to build part or all of your DOM with the help of JavaScript. It includes primitives for template creation, template rendering and document tree building. There are tools for building the DOM from in-page resources or dynamically loaded ones. This gives us the flexibility to choose whatever works best for a project. | ||
@@ -120,3 +148,3 @@ ```js | ||
| CSS is a crucial element of most pages on the web. It makes the pages beautiful and improves the UX for visual users. CSS is easy to include globally in any page. However, when localising styles with Shadow DOM (which is the officially supported method), one currently has to make the decision between writing duplicitive declarative styles vs writing JavaScript boilerplate to manage styles efficiently. Sophistry will help with efficiently scoping declaratively written styles to specific elements. The library provides an API which simplifies the code needed for such scoping. It will internally create open shadow roots where necessary. it maintains a cache to avoid reloading or re-processing the same styles (unless we request these). Sophistry can also draw styles from anywhere. | ||
| Styling is a crucial aspect of most pages on the web. We need to make the pages beautiful and improve the UX for visual users. CSS is easy to include globally in any page. However, when localising styles with Shadow DOM, one currently has to make the decision between writing duplicitive declarative styles vs writing JavaScript boilerplate to manage styles efficiently. Sophistry will help with efficiently scoping declaratively written styles to specific elements. The library provides an API which simplifies the code needed for such scoping. It will internally create open shadow roots where necessary. it maintains a cache to avoid reloading or re-processing the same styles (unless we request). Sophistry can also draw styles from anywhere. | ||
@@ -132,3 +160,3 @@ ```js | ||
| Generational exports some useful generators to improve performance and reduce memory footprint. The `range` and `items` generators have been especially useful in the tests and examples. They may not work in many places where arrays are expected because we can only iterate them once. Thus they should be used with caution. When in doubt, just use an array. | ||
| Generational exports some useful generators to improve performance and reduce memory footprint. The `range` and `items` generators have been especially useful in the examples. They may not work in many places where arrays are expected because we can only iterate them once. Thus they should be used with caution. When in doubt, use an array. | ||
@@ -145,44 +173,13 @@ ```js | ||
| ## Actribute | ||
| Actribute aims to provide a more widely supported, flexible and powerful alternative to extending built-in HTML elements, using a similar API. | ||
| ```js | ||
| import { Actribute } from "deleight/actribute"; | ||
| // initialize: | ||
| const fallbackProps = { | ||
| prop1: "Fallback", prop4: "Last resort", | ||
| sig: '$2b$20$o7DWuroOjbA/4LDWIstjueW9Hi6unv4fI0xAit7UQfLw/PI8iPl1y' | ||
| }; | ||
| const act = new Actribute(fallbackProps); | ||
| // register components: | ||
| act.register("comp1", (node, prop1) => (node.textContent = prop1)); | ||
| act.register("comp2", (node, prop2) => (node.style.left = prop2)); | ||
| // use in markup: | ||
| // <section c-comp1="prop1" c-comp2="prop2"> | ||
| // First section | ||
| // </section> | ||
| // process components: | ||
| act.process(document.body, { prop2: 1, prop3: 2 }); | ||
| // unregister a component: | ||
| delete act.registry.comp2; | ||
| ``` | ||
| ## Withy | ||
| We are bringing the `with` functionality back to JavaScript with the help of Proxies. With was removed from the language | ||
| We are bringing `with` back to JavaScript with the help of Proxies. This functionality was removed from the language | ||
| because of performance, code comprehension and readbility issues. Once we have an implementation without these limitations, | ||
| we can benefit from the improved concision and structure of our code. | ||
| we can benefit from the improved concision and structure in our code. | ||
| ```js | ||
| import { With, SET } from "deleight/withy"; | ||
| With(document.createElement('div'))[SET]({ | ||
| textContent: 'Wow!' | ||
| })(div => document.body.append(div)); | ||
| With(document.createElement('button'))[SET]({ | ||
| textContent: 'Wow!', className: 'main' | ||
| })(btm => document.body.append(btn)); | ||
| ``` | ||
@@ -227,6 +224,4 @@ | ||
| If you like the concept and/or the direction of deleight, feel free to contribute to this project. We are accepting contributions in many areas. Just give us a shout. The discussion area is open, and more channels are in the pipeline. | ||
| If you like the concept and/or the direction of deleight, feel free to contribute to this project. We are accepting contributions in many areas. Sponsorship, issues, pull requests, benchmarks, picking up tickets, discussions, questions, examples; all are welcome. We only request that everyone maintains a positive disposition about this and about each-other. | ||
| You can also sponsor this project. That is also in the works. For now you can give us a shout. | ||
| Thank you for contributing. | ||
@@ -236,3 +231,3 @@ | ||
| - Work on a new reactivity module to support more independent HTML and JavaScript development. | ||
| - Enhancing appliance and actributes to support more independent HTML and JavaScript development. | ||
| - Adding and completing examples | ||
@@ -239,0 +234,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.19%
130867
- Number of lines in readme file
- decreased by-2.15%
228
No dependency changes