msgs are in a store

srcs/requirements/svelte/api_front/public/build/bundle.js

@@ -1228,7 +1228,7 @@ var app = (function () {
 
     /* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */
 
-    const { Error: Error_1, Object: Object_1, console: console_1$b } = globals;
+    const { Error: Error_1, Object: Object_1, console: console_1$a } = globals;
 
     // (267:0) {:else}
     function create_else_block$6(ctx) {
@@ -2008,7 +2008,7 @@ var app = (function () {
     	const writable_props = ['routes', 'prefix', 'restoreScrollState'];
 
     	Object_1.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$b.warn(`<Router> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$a.warn(`<Router> was created with unknown prop '${key}'`);
     	});
 
     	function routeEvent_handler(event) {
@@ -2292,7 +2292,7 @@ var app = (function () {
 
     /* src/pieces/Header.svelte generated by Svelte v3.53.1 */
 
-    const { console: console_1$a } = globals;
+    const { console: console_1$9 } = globals;
     const file$u = "src/pieces/Header.svelte";
 
     // (27:39) 
@@ -2551,7 +2551,7 @@ var app = (function () {
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$a.warn(`<Header> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Header> was created with unknown prop '${key}'`);
     	});
 
     	const click_handler = () => push('/');
@@ -7868,9 +7868,9 @@ var app = (function () {
     	});
     });
 
-    /* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
+    let msgs = writable([]);
 
-    const { console: console_1$9 } = globals;
+    /* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
     const file$m = "src/pieces/chat/Layout_room.svelte";
 
     function get_each_context$4(ctx, list, i) {
@@ -7879,7 +7879,7 @@ var app = (function () {
     	return child_ctx;
     }
 
-    // (54:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
+    // (50:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
     function create_default_slot_4$2(ctx) {
     	let t;
 
@@ -7899,14 +7899,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_4$2.name,
     		type: "slot",
-    		source: "(54:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
+    		source: "(50:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (59:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
+    // (55:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
     function create_default_slot_3$4(ctx) {
     	let t;
 
@@ -7926,14 +7926,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_3$4.name,
     		type: "slot",
-    		source: "(59:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
+    		source: "(55:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (64:1) <Button bind:layout new_layout="close" my_class="close icon">
+    // (60:1) <Button bind:layout new_layout="close" my_class="close icon">
     function create_default_slot_2$8(ctx) {
     	let t;
 
@@ -7953,14 +7953,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_2$8.name,
     		type: "slot",
-    		source: "(64:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
+    		source: "(60:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (72:4) <Msg name={msg.name}>
+    // (68:4) <Msg name={msg.name}>
     function create_default_slot_1$8(ctx) {
     	let html_tag;
     	let raw_value = /*msg*/ ctx[4].content + "";
@@ -7977,7 +7977,7 @@ var app = (function () {
     			insert_dev(target, html_anchor, anchor);
     		},
     		p: function update(ctx, dirty) {
-    			if (dirty & /*msgs*/ 8 && raw_value !== (raw_value = /*msg*/ ctx[4].content + "")) html_tag.p(raw_value);
+    			if (dirty & /*$msgs*/ 8 && raw_value !== (raw_value = /*msg*/ ctx[4].content + "")) html_tag.p(raw_value);
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(html_anchor);
@@ -7989,14 +7989,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_1$8.name,
     		type: "slot",
-    		source: "(72:4) <Msg name={msg.name}>",
+    		source: "(68:4) <Msg name={msg.name}>",
     		ctx
     	});
 
     	return block;
     }
 
-    // (71:3) {#each msgs as msg}
+    // (67:3) {#each $msgs as msg}
     function create_each_block$4(ctx) {
     	let msg_1;
     	let current;
@@ -8020,9 +8020,9 @@ var app = (function () {
     		},
     		p: function update(ctx, dirty) {
     			const msg_1_changes = {};
-    			if (dirty & /*msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;
+    			if (dirty & /*$msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;
 
-    			if (dirty & /*$$scope, msgs*/ 32776) {
+    			if (dirty & /*$$scope, $msgs*/ 32776) {
     				msg_1_changes.$$scope = { dirty, ctx };
     			}
 
@@ -8046,14 +8046,14 @@ var app = (function () {
     		block,
     		id: create_each_block$4.name,
     		type: "each",
-    		source: "(71:3) {#each msgs as msg}",
+    		source: "(67:3) {#each $msgs as msg}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (89:1) <Button my_class="send" on_click={send_msg}>
+    // (85:1) <Button my_class="send" on_click={send_msg}>
     function create_default_slot$a(ctx) {
     	let t;
 
@@ -8073,7 +8073,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$a.name,
     		type: "slot",
-    		source: "(89:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
+    		source: "(85:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
     		ctx
     	});
 
@@ -8156,7 +8156,7 @@ var app = (function () {
 
     	button2 = new Chat_button({ props: button2_props, $$inline: true });
     	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
-    	let each_value = /*msgs*/ ctx[3];
+    	let each_value = /*$msgs*/ ctx[3];
     	validate_each_argument(each_value);
     	let each_blocks = [];
 
@@ -8200,17 +8200,17 @@ var app = (function () {
     			t4 = space();
     			create_component(button3.$$.fragment);
     			attr_dev(div0, "class", "msg_thread svelte-1quyp80");
-    			add_location(div0, file$m, 69, 2, 1224);
+    			add_location(div0, file$m, 65, 2, 1218);
     			attr_dev(div1, "class", "panel panel_msg svelte-1quyp80");
-    			add_location(div1, file$m, 68, 1, 1192);
+    			add_location(div1, file$m, 64, 1, 1186);
     			attr_dev(div2, "class", "text_area svelte-1quyp80");
     			attr_dev(div2, "contenteditable", "true");
     			if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[10].call(div2));
-    			add_location(div2, file$m, 78, 2, 1397);
+    			add_location(div2, file$m, 74, 2, 1392);
     			attr_dev(div3, "class", "panel_write svelte-1quyp80");
-    			add_location(div3, file$m, 77, 1, 1369);
+    			add_location(div3, file$m, 73, 1, 1364);
     			attr_dev(div4, "class", "grid_box svelte-1quyp80");
-    			add_location(div4, file$m, 50, 0, 804);
+    			add_location(div4, file$m, 46, 0, 798);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -8295,8 +8295,8 @@ var app = (function () {
 
     			button2.$set(button2_changes);
 
-    			if (dirty & /*msgs*/ 8) {
+    			if (dirty & /*$msgs*/ 8) {
-    				each_value = /*msgs*/ ctx[3];
+    				each_value = /*$msgs*/ ctx[3];
     				validate_each_argument(each_value);
     				let i;
 
@@ -8386,24 +8386,22 @@ var app = (function () {
     }
 
     function instance$p($$self, $$props, $$invalidate) {
+    	let $msgs;
+    	validate_store(msgs, 'msgs');
+    	component_subscribe($$self, msgs, $$value => $$invalidate(3, $msgs = $$value));
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('Layout_room', slots, []);
-
-    	socket$1.on('message', (name, message) => {
-    		console.log(name);
-    		console.log(message);
-    		add_msg(name, message);
-    	});
-
     	let { layout = "" } = $$props;
     	let { back = "" } = $$props;
     	let msg = "";
     	let text_area;
-    	let msgs = [];
 
+    	//let msgs = [];
     	function add_msg(from, message) {
     		if (from === user.username) from = "me";
-    		$$invalidate(3, msgs = [...msgs, { content: message, name: from }]);
+
+    		//msgs = [...msgs, { content: message, name: from }];
+    		msgs.update(msgs => [...msgs, { content: message, name: from }]);
     	}
 
     	function send_msg() {
@@ -8428,7 +8426,7 @@ var app = (function () {
     	const writable_props = ['layout', 'back'];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Layout_room> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_room> was created with unknown prop '${key}'`);
     	});
 
     	function button0_layout_binding(value) {
@@ -8468,14 +8466,15 @@ var app = (function () {
     		Msg: Chat_msg,
     		socket: socket$1,
     		user,
+    		msgs,
     		layout,
     		back,
     		msg,
     		text_area,
-    		msgs,
     		add_msg,
     		send_msg,
-    		send_msg_if
+    		send_msg_if,
+    		$msgs
     	});
 
     	$$self.$inject_state = $$props => {
@@ -8483,7 +8482,6 @@ var app = (function () {
     		if ('back' in $$props) $$invalidate(1, back = $$props.back);
     		if ('msg' in $$props) $$invalidate(4, msg = $$props.msg);
     		if ('text_area' in $$props) $$invalidate(2, text_area = $$props.text_area);
-    		if ('msgs' in $$props) $$invalidate(3, msgs = $$props.msgs);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -8494,7 +8492,7 @@ var app = (function () {
     		layout,
     		back,
     		text_area,
-    		msgs,
+    		$msgs,
     		msg,
     		send_msg,
     		send_msg_if,
@@ -13991,9 +13989,7 @@ var app = (function () {
     	validate_slots('Chat', slots, []);
     	let { color = "transparent" } = $$props;
 
-    	onMount(async () => {
+    	// pbm: sometimes socket is still undefined here
-    		await socket$1;
-
     	socket$1.on('connect', function () {
     		console.log("socket.io connected");
     	});
@@ -14041,7 +14037,13 @@ var app = (function () {
     	socket$1.on('pong', function () {
     		console.log("socket.io pong");
     	});
-    	});
+
+    	socket$1.on('message', (from, message) => {
+    		if (from === user.username) from = "me";
+
+    		//msgs = [...msgs, { content: message, name: from }];
+    		msgs.update(msgs => [...msgs, { content: message, name: from }]);
+    	}); //add_msg(name, message);
 
     	const writable_props = ['color'];
 
@@ -14053,7 +14055,7 @@ var app = (function () {
     		if ('color' in $$props) $$invalidate(0, color = $$props.color);
     	};
 
-    	$$self.$capture_state = () => ({ Layouts: Chat_layouts, color, onMount, socket: socket$1 });
+    	$$self.$capture_state = () => ({ Layouts: Chat_layouts, color, socket: socket$1, user, msgs });
 
     	$$self.$inject_state = $$props => {
     		if ('color' in $$props) $$invalidate(0, color = $$props.color);

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte

@@ -3,14 +3,13 @@
 
 	import Layouts from './Chat_layouts.svelte';
 	export let color = "transparent";
-	import { onMount } from 'svelte';
 
 	/* web sockets with socket.io
 	*/
-	import { socket } from './Chat_socket.svelte';
+	import { socket, user } from './Chat_socket.svelte';
+	import { msgs } from './Store_msg.js';
 
-	onMount(async() => {
+	// pbm: sometimes socket is still undefined here
-		await socket;
 	socket.on('connect', function(){
 		console.log("socket.io connected");
 	});
@@ -47,6 +46,14 @@
 	socket.on('pong', function(){
 		console.log("socket.io pong");
 	});
+
+
+	socket.on('message', (from, message) => {
+		if (from === user.username)
+			from = "me";
+		//msgs = [...msgs, { content: message, name: from }];
+		msgs.update(msgs => [...msgs, { content: message, name: from }]);
+		//add_msg(name, message);
 	});
 
 </script>

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte

@@ -4,25 +4,21 @@
 	import Button from './Chat_button.svelte';
 	import Msg from './Chat_msg.svelte';
 	import { socket, user } from './Chat_socket.svelte';
-
+	import { msgs } from './Store_msg.js';
-	socket.on('message', (name, message) => {
-		console.log(name)
-		console.log(message)
-		add_msg(name, message);
-	});
 
 	export let layout = "";
 	export let back = "";
 
 	let msg = "";
 	let text_area;
-	let msgs = [];
+	//let msgs = [];
 
 	function add_msg(from, message)
 	{
 		if (from === user.username)
 			from = "me";
-		msgs = [...msgs, { content: message, name: from }];
+		//msgs = [...msgs, { content: message, name: from }];
+		msgs.update(msgs => [...msgs, { content: message, name: from }]);
 	}
 
 	function send_msg()
@@ -68,7 +64,7 @@
 	<!-- msg -->
 	<div class="panel panel_msg">
 		<div class="msg_thread">
-			{#each msgs as msg}
+			{#each $msgs as msg}
 				<Msg name={msg.name}>{@html msg.content}</Msg>
 			{/each}
 		</div>

srcs/requirements/svelte/api_front/src/pieces/chat/Store_msg.js

@@ -0,0 +1,5 @@
+
+import { writable } from 'svelte/store';
+
+export let msgs = writable([]);
+