diff --git a/README.md b/README.md index b6f3219..6e17e3d 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ When you are developing your app, use `lui.dev.js` instead to get debugging stuf There are several ways to include lui into your project: -### Load the latest standalone from my server +### Load the latest standalone from a cdn When you want to automatically include the latest version, just add the following to your HTML file: @@ -47,6 +47,38 @@ When you want to automatically include the latest version, just add the followin ``` +### Include lui via RequireJS + +Normally, lui controls the entire page. But it is also possible to dynamically load lui and let it control just a part of the page. + +```js +require.config({ + map: { + '*': { + 'lui': 'https://cdn.jsdelivr.net/gh/L3P3/lui@dist/lui.r.js' + } + } +}); +``` + +Use `lui.r.dev.js` when developing. And here is your widget's file: + +```js +define(['lui'], function(lui) { + return function(root) { + lui.init(function() { + return [ + null, + [ + lui.node_dom('h1[innerText=Moin!]') + ] + ]; + }, root); + }; +}); +``` + + ### Bundle lui with your app You can simply run `npm install https://github.com/l3p3/lui` to install it. Later, when lui ist complete enough, I may add it to npm as well. @@ -153,6 +185,8 @@ init(() => { This approach is neccessary since there is no `body` component to use. +When loading the [RequireJS variant](#include-lui-via-requirejs), you need to specify the root element when calling `init`. All other lui variants just take the body element. + ### JSX If you are building your application code with [JSX](https://reactjs.org/docs/introducing-jsx.html) support, you _could_ theoretically write components like this: diff --git a/build.js b/build.js index dcc4faf..6c3244b 100644 --- a/build.js +++ b/build.js @@ -20,21 +20,24 @@ const exec = cmd => ( ) ) -function flags_set(debug, verbose, legacy) { +function flags_set(debug, verbose, legacy, rjs) { fs.writeFileSync( './src/flags.js', `export const DEBUG = ${debug}; export const VERBOSE = ${verbose}; export const LEGACY = ${legacy}; +export const RJS = ${rjs}; `, 'utf8' ); } -async function build(prod, legacy) { - flags_set(!prod, false, legacy); +async function build(prod, legacy, rjs) { + flags_set(!prod, false, legacy, rjs); const file = `./dist/lui${ + rjs ? '.r' : '' + }${ prod ? '' : '.dev' }${ legacy ? '.legacy' : '' @@ -51,7 +54,11 @@ async function build(prod, legacy) { 'js ./src', 'js_output_file ' + file, 'language_in ECMASCRIPT_NEXT', - `language_out ECMASCRIPT${legacy ? '3' : '6_STRICT'}`, + `language_out ECMASCRIPT${ + legacy ? '3' + : rjs ? '5_STRICT' + : '6_STRICT' + }`, 'module_resolution WEBPACK', 'rewrite_polyfills false', 'strict_mode_input', @@ -61,14 +68,20 @@ async function build(prod, legacy) { .join(' --') ))[2]); + const wrap_fn = legacy || rjs; + const code_js = ( ( fs.readFileSync(file, 'utf8') .trim() + '%END%' ) .replace('lui.js web frame work', 'lui.js web frame work ' + version) - .replace('*/\n', '*/\n{') - .replace(';%END%', '}') + .replace('*/\n', + wrap_fn ? '*/\n(function(){' : '*/\n{' + ) + .replace(';%END%', + wrap_fn ? '})()' : '}' + ) //.split('\n').join('') ); @@ -91,9 +104,13 @@ await exec('rm ./dist/lui.*'); console.log(`build ${version}...`); -await build(false, false); -await build(true, false); -await build(true, true); +await build(false, false, false); +await build(true, false, false); + +await build(true, true, false); + +await build(false, false, true); +await build(true, false, true); console.log(`raw size: ${ fs.statSync('./dist/lui.js').size @@ -121,5 +138,5 @@ if ( })() .catch(console.log) .finally(() => { - flags_set(true, false, false); + flags_set(true, false, false, false); }); diff --git a/package.json b/package.json index de8ef6c..fbf9453 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lui", - "version": "1.0.1", + "version": "1.1.0", "description": "web framework", "homepage": "https://l3p3.de/dok/lui.html", "repository": { diff --git a/src/externs.js b/src/externs.js index 3e5133c..a0ba531 100644 --- a/src/externs.js +++ b/src/externs.js @@ -55,4 +55,14 @@ var TYPE_PROPS; now }} */ +var TYPE_LUI; + +/** + @type {TYPE_LUI} +*/ window.lui; + +/** + @param {TYPE_LUI} lui +*/ +function define(lui) {} diff --git a/src/flags.js b/src/flags.js index 306e98e..68866dd 100644 --- a/src/flags.js +++ b/src/flags.js @@ -1,3 +1,4 @@ export const DEBUG = true; export const VERBOSE = false; export const LEGACY = false; +export const RJS = false; diff --git a/src/lui.js b/src/lui.js index 5db3298..0b03a6a 100644 --- a/src/lui.js +++ b/src/lui.js @@ -4,7 +4,12 @@ L3P3.de 2021 */ -import {DEBUG, VERBOSE, LEGACY} from './flags.js'; +import { + DEBUG, + VERBOSE, + LEGACY, + RJS, +} from './flags.js'; /// COMPILATION /// @@ -2005,10 +2010,11 @@ export const node_map = (component, list_data, props) => ( ) /** - mounts the body component - @param {function():!Array} body + mounts the root component + @param {function():!Array} root + @param {HTMLElement=} dom_c */ -export const init = body => { +export const init = (root, dom_c) => { VERBOSE && log('init'); DEBUG && ( @@ -2018,14 +2024,18 @@ export const init = body => { render_queue_next.length ) && error('init called more than once'), - typeof body !== 'function' && - error('init function requires body component') + typeof root !== 'function' && + error('init function requires root component'), + RJS && ( + dom_c || + error('root element must be specified') + ) ); let result;//[props, childs] - const dom = document_.body; - dom.innerHTML = ''; + const dom_d = document_.body; + (RJS ? dom_c : dom_d).innerHTML = ''; /** @type {TYPE_COMPONENT} @@ -2034,7 +2044,7 @@ export const init = body => { DEBUG && ( ( !( - result = body() + result = root() ) || result.length !== 2 ) && error('root component must return [props, childs]'), @@ -2047,21 +2057,21 @@ export const init = body => { result[0] ), result[0].C && - error('body childs must be in second return value') + error('root childs must be in second return value') ) ), hook_dom_common( ( DEBUG ? result - : result = body() + : result = root() )[0] ), result[1] ); DEBUG && ( - component['name_'] = '$body' + component['name_'] = '$root' ); ( @@ -2076,8 +2086,8 @@ export const init = body => { parent_index: 0, slots: [], childs: null_, - dom, - dom_first: dom, + dom: /** @type {HTMLElement} */ (RJS ? dom_c : dom_d), + dom_first: /** @type {HTMLElement} */ (RJS ? dom_c : dom_d), dirty: true_, } ).slots[0] = { diff --git a/src/luirt.js b/src/luirt.js index f7bb8ef..a498398 100644 --- a/src/luirt.js +++ b/src/luirt.js @@ -1,3 +1,4 @@ +import {RJS} from './flags.js'; import { defer, defer_end, @@ -24,10 +25,10 @@ import { node_dom, node_map, now, - window_ + window_, } from './lui.js'; -window_['lui'] = { +const lui = { defer, defer_end, hook_assert, @@ -52,5 +53,12 @@ window_['lui'] = { node, node_dom, node_map, - now + now, +}; + +if (RJS) { + define(lui); +} +else { + window_['lui'] = lui; }