#35 multiple roots allowed

L3P3 · Jul 3, 2021 · 9125de7 · 9125de7
1 parent d1c6143
commit 9125de7
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -55,28 +55,28 @@ Normally, lui controls the entire page. But it is also possible to dynamically l
 
 ```js
 require.config({
-	map: {
-		'*': {
-			'lui': 'https://cdn.jsdelivr.net/gh/L3P3/lui@dist/lui.r.js'
-		}
-	}
+    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);
-	};
+    return function(root) {
+        lui.init(function() {
+            return [
+                null,
+                [
+                    lui.node_dom('h1[innerText=Moin!]')
+                ]
+            ];
+        }, root);
+    };
 });
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "lui",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"description": "web framework",
 	"homepage": "https://l3p3.de/dok/lui.html",
 	"repository": {

diff --git a/src/lui.js b/src/lui.js
@@ -2018,18 +2018,22 @@ export const init = (root, dom_c) => {
 	VERBOSE && log('init');
 
 	DEBUG && (
-		(
-			current ||
-			render_queue.length ||
-			render_queue_next.length
-		) &&
-			error('init called more than once'),
+		RJS
+		?	(
+				dom_c ||
+					error('no root element specified'),
+				dom_c.lui &&
+					error('root element already mounted'),
+				dom_c.lui = true_
+			)
+		:	(
+				current ||
+				render_queue.length ||
+				render_queue_next.length
+			) &&
+				error('init called more than once'),
 		typeof root !== 'function' &&
-			error('init function requires root component'),
-		RJS && (
-			dom_c ||
-				error('root element must be specified')
-		)
+			error('no init function specified')
 	);
 
 	let result;//[props, childs]

diff --git a/test/rjs/rjs.html b/test/rjs/rjs.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+	<head>
+		<title>LUI+RequireJS</title>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+		<script>
+			require.config({
+				map: {
+					'*': {
+						'lui': '/dist/lui.r.dev.js'
+					}
+				}
+			});
+		</script>
+	</head>
+	<body>
+		<h1>Eine Testseite</h1>
+
+		<div id="widget1"></div>
+		<script>
+			require(['widget-uhr.js'], function(mount) {
+				mount(document.getElementById('widget1'));
+			});
+		</script>
+
+		<p>Und hier nochmal:</p>
+
+		<div id="widget2"></div>
+		<script>
+			require(['widget-uhr.js'], function(mount) {
+				mount(document.getElementById('widget2'));
+			});
+		</script>
+	</body>
+</html>
diff --git a/test/rjs/widget-uhr.js b/test/rjs/widget-uhr.js
@@ -0,0 +1,21 @@
+define(['lui'], function(lui) {
+	function Uhr() {
+		lui.hook_rerender();
+		lui.hook_dom('p', {
+			innerText: lui.now()
+		});
+		return null;
+	}
+
+	return function(root) {
+		lui.init(function() {
+			return [{
+				S: {
+					background: 'lime'
+				}
+			}, [
+				lui.node(Uhr)
+			]];
+		}, root);
+	};
+});