feat: saves any changed css to object store for content dilevery and caching. data-save='true' to lazyload save component and to save any changes to the css

Author: frankpagan

dist/CoCreateCSS.min.js

@@ -64,8 +64,8 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/crdt": "^1.0.11",
     "@cocreate/docs": "^1.0.3",
+    "@cocreate/hosting": "^1.0.0",
     "@cocreate/observer": "^1.0.1"
   }
 }

package.json

@@ -1,6 +1,5 @@
 /* Parsing CSS for Utility CSS*/
 import observer from '@cocreate/observer'
-
 import './box-shadow.css'
 import './CoCreate-avatar.css'
 import './CoCreate-badge.css'
@@ -31,17 +30,27 @@ const rangesArray = Object.values(ranges);
 
 
 let styleEl = document.createElement("style");
-styleEl.setAttribute('component', 'CoCreateCss')
-document.head.appendChild(styleEl);
+
 let selectorList = [];
 let styleList = [];
 let tempStyleList = [];
-let styleElSheet = styleEl.sheet;
+let styleElSheet;
 
 
 
 
 window.addEventListener("load", function() {
+
+
+  // let link = document.querySelector('link[data-collection][data-document_id][name]');
+  // if (link)
+  //   return;
+
+  styleEl.setAttribute('component', 'CoCreateCss')
+  document.head.appendChild(styleEl);
+  styleElSheet = styleEl.sheet;
+
+
   let hasChange = false;
 
   observer.init({
@@ -52,8 +61,8 @@ window.addEventListener("load", function() {
 
 
       // // console.log('ccCSS observer start', performance.now())
-      
-          hasChange = addParsingClassList(mutation.target.classList);
+
+      hasChange = addParsingClassList(mutation.target.classList);
       if (mutation.type == "childList")
         mutation.target.querySelectorAll("*").forEach((el) => {
           hasChange = addParsingClassList(el.classList) || hasChange;
@@ -179,13 +188,16 @@ function parseClass(classname) {
   let rule = "";
   let suffix = res[1]
     .replace(/\./g, "\\.")
-    .replace(/%/, "\\%")
+    .replace(/%/g, "\\%")
     .replace(/@/g, "\\@")
     .replace(/\(/g, "\\(")
     .replace(/\)/g, "\\)")
     .replace(/#/g, "\\#")
     .replace(/,/g, "\\,")
-    .replace(/!/, "\\!");
+    .replace(/!/g, "\\!")
+    .replace(/\//g, "\\/")
+    .replace(/\"/g, "\\\"")
+    .replace(/\'/g, "\\'");
   res[1] = res[1].split("@")[0];
   res[1] = res[1].replace(/_/g, " ");
   if (res.length > 2) {

src/index.js

@@ -0,0 +1,67 @@
+// import crud from '@cocreate/crud-client'
+// import crdt from '@cocreate/crdt'
+
+
+// window.addEventListener('load', () => {
+// 	let links = document.querySelectorAll('link[data-save=true]');
+// 	for (let link of links) {
+// 		let collection = link.getAttribute('data-collection');
+// 		let name = link.getAttribute('name');
+// 		let document_id = link.getAttribute('data-document_id');
+// 		if (collection && name && document_id)
+// 			window.addEventListener('newCoCreateCssStyles', function(isFirst, styleList) {
+// 				crdt.replaceText({ collection, name, document_id, name: 'css', value: styleList.join('\r\n') });
+// 			})
+
+// 	}
+
+// })
+
+
+
+
+if (window.CoCreate.crdt) {
+	window.addEventListener('load', () => {
+		let links = document.querySelectorAll('link[data-save=true]');
+		for (let link of links) {
+			let collection = link.getAttribute('data-collection');
+			let name = link.getAttribute('name');
+			let document_id = link.getAttribute('data-document_id');
+			if (collection && name && document_id)
+				window.addEventListener('newCoCreateCssStyles', function(isFirst, styleList) {
+
+					window.CoCreate.crdt.init({
+						collection,
+						document_id,
+						name,
+					})
+					window.CoCreate.crdt.replaceText({ collection, name, document_id, name: 'css', value: styleList.join('\r\n') });
+				})
+		}
+	})
+}
+else {
+
+	window.addEventListener('load', () => {
+		let links = document.querySelectorAll('link[data-save=true]');
+		for (let link of links) {
+			let collection = link.getAttribute('data-collection');
+			let name = link.getAttribute('name');
+			let document_id = link.getAttribute('data-document_id');
+			if (collection && name && document_id)
+				window.addEventListener('newCoCreateCssStyles', function(isFirst, styleList) {
+					window.CoCreate.crud.updateDocument({
+						collection,
+						document_id,
+						upsert: true,
+						// broadcast_sender,
+						data: {
+							[name]: styleList.join('\r\n')
+						},
+					});
+				})
+		}
+	})
+
+}
+

src/save.js

@@ -859,6 +859,15 @@
     "@cocreate/docs" "^1.0.3"
     "@cocreate/socket-client" "^1.0.2"
 
+"@cocreate/crud-client@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@cocreate/crud-client/-/crud-client-1.0.7.tgz#006c803346f750d25d44615dd901d4a87f308516"
+  integrity sha512-Eq5sW08EIB+HG9MWNm65p+1Uw3GxnmzhfARwzSSdeUljlFxq30w7SyIsH9Cb3m5nKE3hzeN1JHVrw9HvkClXoQ==
+  dependencies:
+    "@cocreate/docs" "^1.0.3"
+    "@cocreate/socket-client" "^1.0.2"
+    mini-css-extract-plugin "^1.5.0"
+
 "@cocreate/cursors@^1.1.5":
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/@cocreate/cursors/-/cursors-1.1.6.tgz#0f6a327b91b502e5c15cff972167830b1e5e0d00"
@@ -892,6 +901,15 @@
     "@cocreate/observer" "^1.0.0"
     "@cocreate/utils" "^1.0.0"
 
+"@cocreate/hosting@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@cocreate/hosting/-/hosting-1.0.0.tgz#33877f617f5d6a61a809266d7b629988ee592bb4"
+  integrity sha512-VuH0CsA+qs3AHhrjEHskZlkooHHD/+Hp/gUM3vu7caFETBbsdrcolrx0w9U+9whaoY48QcROgH5Dpp/gUSw6ag==
+  dependencies:
+    "@cocreate/crud-client" "^1.0.7"
+    "@cocreate/docs" "^1.0.3"
+    "@cocreate/socket-client" "^1.0.9"
+
 "@cocreate/input@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@cocreate/input/-/input-1.0.5.tgz#b99960ba206aae1b4a2f8b8c56bd38ff6d867630"
@@ -915,6 +933,15 @@
     "@cocreate/docs" "^1.0.3"
     ws "^7.4.4"
 
+"@cocreate/socket-client@^1.0.9":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@cocreate/socket-client/-/socket-client-1.0.9.tgz#e9604f906ef50bc6563832c61457d9b136591733"
+  integrity sha512-RWNcqJWkS+Y0nfJvA3dbEy4nV48vX9XGLtzjfXqYwvg9NfnZ+Nfis/+BnV1AK5aU6QC/XrxrSFcuEfrp+lc/mg==
+  dependencies:
+    "@cocreate/docs" "^1.0.3"
+    mini-css-extract-plugin "^1.5.0"
+    ws "^7.4.4"
+
 "@cocreate/utils@^1.0.0":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@cocreate/utils/-/utils-1.0.2.tgz#91062620ec481ed25d19973d1f9b5dee7e945012"