#34 requirejs variant added

README.md

@@ -39,14 +39,46 @@ 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:
 
 ```html
 <script src="https://cdn.jsdelivr.net/gh/L3P3/lui@dist/lui.js"></script>
 ```
 
+### 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:

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);
 });

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": {

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) {}

src/flags.js

@@ -1,3 +1,4 @@
 export const DEBUG = true;
 export const VERBOSE = false;
 export const LEGACY = false;
+export const RJS = false;

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] = {

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;
 }