$
This commit is contained in:
21
node_modules/@riotjs/lazy/LICENSE.txt
generated
vendored
Normal file
21
node_modules/@riotjs/lazy/LICENSE.txt
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Gianluca Guarini
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
117
node_modules/@riotjs/lazy/README.md
generated
vendored
Normal file
117
node_modules/@riotjs/lazy/README.md
generated
vendored
Normal file
@@ -0,0 +1,117 @@
|
||||
# Riot Lazy
|
||||
|
||||
[](https://github.com/riot/lazy/)
|
||||
|
||||
[![Build Status][ci-image]][ci-url] [![Code Quality][codeclimate-image]][codeclimate-url] [![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] [![Coverage Status][coverage-image]][coverage-url]
|
||||
|
||||
> Lazy wrapper for Riot.js components
|
||||
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Install](#install)
|
||||
- [Documentation](#documentation)
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm i -S @riotjs/lazy
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
The following examples show how you can lazy load Riot.js components using modern javascript bundlers like [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/).
|
||||
|
||||
You can lazy load any component providing a fallback component during the loading process for example:
|
||||
|
||||
```riot
|
||||
<app>
|
||||
<user name={state.name}/>
|
||||
<sidebar/>
|
||||
|
||||
<script>
|
||||
import lazy from '@riotjs/lazy'
|
||||
import Loader from './my-loader.riot'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// use a fallback loader
|
||||
user: lazy(Loader, () => import('./user.riot'))
|
||||
// just lazy load the sidebar
|
||||
sidebar: lazy(() => import('./sidebar.riot'))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</app>
|
||||
```
|
||||
|
||||
When the component is loaded, Lazy will dispatch a 'load' event from the component root element.
|
||||
|
||||
This can be useful e.g. for removing splashscreen on app start:
|
||||
|
||||
```riot
|
||||
<app>
|
||||
<user name={state.name} onload={ removeSplashscreen }/>
|
||||
|
||||
<script>
|
||||
import lazy from '@riotjs/lazy'
|
||||
import Loader from './my-loader.riot'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// use a fallback loader
|
||||
user: lazy(Loader, () => import('./user.riot'))
|
||||
},
|
||||
removeSplashscreen() {
|
||||
// the splashscreen, in this example, is create in pure html
|
||||
// in the main page, to avoid blank page loading
|
||||
const splashscreen = document.querySelector("#splashscreen");
|
||||
if (!splashscreen) {
|
||||
return;
|
||||
}
|
||||
splashcreen.parentElement.removeChild(splashscreen);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</app>
|
||||
```
|
||||
|
||||
Lazy loading Riot.js components is recommended combined with [`@riotjs/route`](https://github.com/riot/route)
|
||||
|
||||
```riot
|
||||
<app>
|
||||
<router>
|
||||
<route path="/user/:name">
|
||||
<!-- this component will be loaded only when the route will be matched -->
|
||||
<user name={route[0]}/>
|
||||
</route>
|
||||
</router>
|
||||
|
||||
<script>
|
||||
import lazy from '@riotjs/lazy'
|
||||
import Loader from './my-loader.riot'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
user: lazy(Loader, () => import('./user.riot'))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</app>
|
||||
```
|
||||
|
||||
[ci-image]:https://img.shields.io/github/workflow/status/riot/lazy/test?style=flat-square
|
||||
[ci-url]:https://github.com/riot/lazy/actions
|
||||
|
||||
[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
|
||||
[license-url]:LICENSE.txt
|
||||
|
||||
[npm-version-image]:http://img.shields.io/npm/v/@riotjs/lazy.svg?style=flat-square
|
||||
[npm-downloads-image]:http://img.shields.io/npm/dm/@riotjs/lazy.svg?style=flat-square
|
||||
[npm-url]:https://npmjs.org/package/@riotjs/lazy
|
||||
|
||||
[coverage-image]:https://img.shields.io/coveralls/riot/lazy/main.svg?style=flat-square
|
||||
[coverage-url]:https://coveralls.io/github/riot/lazy/?branch=main
|
||||
|
||||
[codeclimate-image]:https://api.codeclimate.com/v1/badges/be8992e6e7549e6b72a1/maintainability
|
||||
[codeclimate-url]:https://codeclimate.com/github/riot/lazy/maintainability
|
74
node_modules/@riotjs/lazy/index.next.js
generated
vendored
Normal file
74
node_modules/@riotjs/lazy/index.next.js
generated
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
import { component, pure } from 'riot'
|
||||
import { cleanNode } from '@riotjs/util/dom'
|
||||
|
||||
// this object will contain all the components implementations lazy loaded
|
||||
const cache = new WeakMap()
|
||||
|
||||
// expose the cache as static property
|
||||
lazy.cache = cache
|
||||
|
||||
// static attribute in case we want to just export a lazy riot component
|
||||
lazy.export = function lazyExport(Loader, Component) {
|
||||
// it could be that the user don't want to use a loader for whatever reason
|
||||
const hasLoader = Loader && Component
|
||||
const LazyComponent = hasLoader ? Component : Loader
|
||||
const load = () => typeof LazyComponent === 'function' ? LazyComponent() : Promise.resolve(LazyComponent)
|
||||
const cachedComponent = cache.get(LazyComponent)
|
||||
|
||||
return pure(({ slots, attributes, props }) => ({
|
||||
mount(el, parentScope) {
|
||||
this.el = el
|
||||
this.isMounted = true
|
||||
const mount = () => {
|
||||
this.mountLazyComponent(parentScope)
|
||||
this.el.dispatchEvent(new Event('load'))
|
||||
}
|
||||
|
||||
if (cachedComponent) {
|
||||
mount()
|
||||
} else {
|
||||
if (hasLoader) this.createManagedComponent(Loader, parentScope)
|
||||
|
||||
load().then(data => {
|
||||
cache.set(LazyComponent, data.default || data)
|
||||
mount()
|
||||
})
|
||||
}
|
||||
},
|
||||
createManagedComponent(Child, parentScope) {
|
||||
this.component = component(Child)(this.el, props, {
|
||||
attributes, slots, parentScope
|
||||
})
|
||||
},
|
||||
mountLazyComponent(parentScope) {
|
||||
// if this component was unmounted just return here
|
||||
if (!this.isMounted) return
|
||||
|
||||
// unmount the loader if it was previously created
|
||||
if (this.component) {
|
||||
// unmount the bindings (keeping the root node)
|
||||
this.component.unmount(true)
|
||||
// clean the DOM
|
||||
if (this.el.children.length) cleanNode(this.el)
|
||||
}
|
||||
|
||||
// replace the old component instance with the new lazy loaded component
|
||||
this.createManagedComponent(cache.get(LazyComponent), parentScope)
|
||||
},
|
||||
update(parentScope) {
|
||||
if (this.isMounted && this.component) this.component.update({}, parentScope)
|
||||
},
|
||||
unmount(...args) {
|
||||
this.isMounted = false
|
||||
|
||||
if (this.component) this.component.unmount(...args)
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
export default function lazy(Loader, Component) {
|
||||
return {
|
||||
name: 'lazy',
|
||||
exports: lazy.export(Loader, Component)
|
||||
}
|
||||
}
|
91
node_modules/@riotjs/lazy/lazy.js
generated
vendored
Normal file
91
node_modules/@riotjs/lazy/lazy.js
generated
vendored
Normal file
@@ -0,0 +1,91 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('riot'), require('@riotjs/util/dom')) :
|
||||
typeof define === 'function' && define.amd ? define(['riot', '@riotjs/util/dom'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lazy = factory(global.riot, global.dom));
|
||||
})(this, (function (riot, dom) { 'use strict';
|
||||
|
||||
const cache = new WeakMap(); // expose the cache as static property
|
||||
|
||||
lazy.cache = cache; // static attribute in case we want to just export a lazy riot component
|
||||
|
||||
lazy.export = function lazyExport(Loader, Component) {
|
||||
// it could be that the user don't want to use a loader for whatever reason
|
||||
const hasLoader = Loader && Component;
|
||||
const LazyComponent = hasLoader ? Component : Loader;
|
||||
|
||||
const load = () => typeof LazyComponent === 'function' ? LazyComponent() : Promise.resolve(LazyComponent);
|
||||
|
||||
const cachedComponent = cache.get(LazyComponent);
|
||||
return riot.pure(_ref => {
|
||||
let {
|
||||
slots,
|
||||
attributes,
|
||||
props
|
||||
} = _ref;
|
||||
return {
|
||||
mount(el, parentScope) {
|
||||
this.el = el;
|
||||
this.isMounted = true;
|
||||
|
||||
const mount = () => {
|
||||
this.mountLazyComponent(parentScope);
|
||||
this.el.dispatchEvent(new Event('load'));
|
||||
};
|
||||
|
||||
if (cachedComponent) {
|
||||
mount();
|
||||
} else {
|
||||
if (hasLoader) this.createManagedComponent(Loader, parentScope);
|
||||
load().then(data => {
|
||||
cache.set(LazyComponent, data.default || data);
|
||||
mount();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
createManagedComponent(Child, parentScope) {
|
||||
this.component = riot.component(Child)(this.el, props, {
|
||||
attributes,
|
||||
slots,
|
||||
parentScope
|
||||
});
|
||||
},
|
||||
|
||||
mountLazyComponent(parentScope) {
|
||||
// if this component was unmounted just return here
|
||||
if (!this.isMounted) return; // unmount the loader if it was previously created
|
||||
|
||||
if (this.component) {
|
||||
// unmount the bindings (keeping the root node)
|
||||
this.component.unmount(true); // clean the DOM
|
||||
|
||||
if (this.el.children.length) dom.cleanNode(this.el);
|
||||
} // replace the old component instance with the new lazy loaded component
|
||||
|
||||
|
||||
this.createManagedComponent(cache.get(LazyComponent), parentScope);
|
||||
},
|
||||
|
||||
update(parentScope) {
|
||||
if (this.isMounted && this.component) this.component.update({}, parentScope);
|
||||
},
|
||||
|
||||
unmount() {
|
||||
this.isMounted = false;
|
||||
if (this.component) this.component.unmount(...arguments);
|
||||
}
|
||||
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
function lazy(Loader, Component) {
|
||||
return {
|
||||
name: 'lazy',
|
||||
exports: lazy.export(Loader, Component)
|
||||
};
|
||||
}
|
||||
|
||||
return lazy;
|
||||
|
||||
}));
|
1
node_modules/@riotjs/lazy/lazy.min.js
generated
vendored
Normal file
1
node_modules/@riotjs/lazy/lazy.min.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
48
node_modules/@riotjs/lazy/package.json
generated
vendored
Normal file
48
node_modules/@riotjs/lazy/package.json
generated
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "@riotjs/lazy",
|
||||
"version": "2.0.2",
|
||||
"description": "Lazy components loader for Riot.js",
|
||||
"main": "lazy.js",
|
||||
"jsnext:main": "index.next.js",
|
||||
"module": "index.next.js",
|
||||
"files": [
|
||||
"index.next.js",
|
||||
"lazy.js",
|
||||
"lazy.min.js"
|
||||
],
|
||||
"scripts": {
|
||||
"lint": "eslint index.next.js test/**/*.js rollup.config.js",
|
||||
"build": "rollup -c",
|
||||
"pretest": "npm run build",
|
||||
"cov": "nyc report --reporter=lcov",
|
||||
"cov-html": "nyc report --reporter=html",
|
||||
"test": "npm run lint && nyc mocha -r esm -r test/setup.js test/index.js",
|
||||
"prepublishOnly": "npm test"
|
||||
},
|
||||
"author": "Gianluca Guarini <gianluca.guarini@gmail.com> (http://gianlucaguarini.com)",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.18.10",
|
||||
"@riotjs/babel-preset": "^1.0.0",
|
||||
"@riotjs/compiler": "^6.3.2",
|
||||
"@riotjs/register": "^6.0.1",
|
||||
"chai": "^4.3.6",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-config-riot": "^3.0.0",
|
||||
"esm": "^3.2.25",
|
||||
"jsdom": "20.0.0",
|
||||
"jsdom-global": "3.0.2",
|
||||
"mocha": "^8.4.0",
|
||||
"nyc": "^15.1.0",
|
||||
"riot": "^7.0.3",
|
||||
"rollup": "^2.78.0",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-terser": "^7.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"riot": "^6.0.0 || ^7.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riotjs/util": "^2.1.1"
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user