Merge pull request #255 from Active-CSS/2.10.0

2.10.0

Author: bob2517

Gruntfile.js

@@ -6,8 +6,8 @@
 	module.exports = function(grunt) {
 		grunt.initConfig({
 			// Custom variables.
-			realVersion: '2.9.1',
-			fileVersion: '2-9-1',
+			realVersion: '2.10.0',
+			fileVersion: '2-10-0',
 
 			pkg: grunt.file.readJSON('package.json'),
 

README.md

@@ -8,7 +8,6 @@
 Boldly go where no CSS author has gone before...
 
 Here's a taster:
-
 ```
 #clickMe:click {
     body {
@@ -17,6 +16,22 @@ Here's a taster:
 }
 ```
 
+Example of a component (because you love components):
+```
+button:click {
+    render-after-end: "<hello-world></hello-world>";
+}
+
+@component hello-world private {
+    html {
+        <p>Hello world</p>
+    }
+    p:click {
+        alert: "Why are you clicking me, you crazy!";
+    }
+}
+```
+
 Ultra-fast. No pre-processing. No virtual DOM. Runs in real-time in the browser.<br>
 All DOM events are supported, plus CSS commands up to level 4 (if browser supported).<br>
 Works on chromium browsers (Chrome, Edge, Opera, etc.) and Firefox. (ES6+)
@@ -30,10 +45,10 @@ The Active CSS installation instructions are [on the website](https://activecss.
 If you are looking for the core script to download, check out the [dist](https://github.com/Active-CSS/active-css/tree/master/dist) folder and then find the version(s) you need.
 
 The production (live) version will look like this:<br>
-activecss-2-9-1.min.js
+activecss-2-10-0.min.js
 
 The development (offline) version will look like this:<br>
-activecss-dev-2-9-1.min.js
+activecss-dev-2-10-0.min.js
 
 There are also npm versions - links on the website.
 

core-test/startup/compiled/core-test-config.acss

@@ -583,7 +583,7 @@ create-element-tag:connectedCallback {
 }
 
 #checkCreateElementDiv:draw {
-	func: checkCreateElement {createElementConnectCallbackVar} {createElementDisconnectedCallbackVar} {createElementAttributeChangeVar} after 1s;
+	func: checkCreateElement pars({createElementConnectCallbackVar}, {createElementDisconnectedCallbackVar}, {createElementAttributeChangeVar}) after 1s;
 }
 
 #checkCreateElement:test {
@@ -836,12 +836,12 @@ create-element-tag:connectedCallback {
 	func: checkFuncFalse false;
 /*	
 	Still to set up:
-	func: checkFuncArr [1, 2, "cheesey wotsit"];
-	func: checkFuncObj {dave: "hi"};
-	func: checkFuncWinVar window.globIt;
-	func: checkFuncACSSVar {myACSSVariable};
-	func: checkFuncExpr {= 7 + 10 =};
-	func: checkFuncCombined [1, 2, "cheesey wotsit"] {dave: "hi"} window.globIt {myACSSVariable} {= new Date =};*/
+	func: checkFuncArr pars([1, 2, "cheesey wotsit"]);
+	func: checkFuncObj pars({dave: "hi"});
+	func: checkFuncWinVar pars(window.globIt);
+	func: checkFuncACSSVar pars({myACSSVariable});
+	func: checkFuncExpr pars({= 7 + 10 =});
+	func: checkFuncCombined pars([1, 2, "cheesey wotsit"], {dave: "hi"}, window.globIt, {myACSSVariable}, {= new Date =});*/
 
 	func: checkFuncFinal;
 }
@@ -987,8 +987,6 @@ create-element-tag:connectedCallback {
 	}
 	a:draw {
 		trigger-real: click;
-	}
-	a:afterTriggerReal {
 		func: checkPreventDefault;	/* If prevent-default works at all then passing the test in the function will be enough. */
 	}
 	html {
@@ -1009,8 +1007,6 @@ create-element-tag:connectedCallback {
 	}
 	a:draw {
 		trigger-real: click;
-	}
-	a:afterTriggerReal {
 		func: checkPreventDefaultShadow;	/* If prevent-default works at all then passing the test in the function will be enough. */
 	}
 	html {
@@ -1198,7 +1194,7 @@ create-element-tag:connectedCallback {
 	&:componentOpen {
 	    #renderHTMLExample {
 	        render: "<span id=\"checkRenderTestDiv\"><strong>render</strong></span>";
-			func: checkRender;
+			func: checkRender after 100ms;
 	    }
 		#renderEscapePTag {
 	        render-after-end: "<span id=\"checkRenderAttrSubHack\">{@data-hackA}</span>" after stack;
@@ -1445,7 +1441,7 @@ create-element-tag:connectedCallback {
 	}
 	#checkStopEventPropagationDiv:draw {
 		trigger-real: click;
-		func: checkStopEventPropagation {checkStopEventPropagationVar} {checkStopEventPropagationAdditionalVar} after 1s;
+		func: checkStopEventPropagation pars({checkStopEventPropagationVar}, {checkStopEventPropagationAdditionalVar}) after 1s;
 	}
 	#checkStopEventPropagationDiv:click {
 		var: checkStopEventPropagationVar 1;
@@ -1536,7 +1532,7 @@ create-element-tag:connectedCallback {
 	}
 	#checkStopPropagationDiv:draw {
 		trigger-real: click;
-		func: checkStopPropagation {checkStopPropagationVar} {checkStopPropagationAdditionalVar} after 1s;
+		func: checkStopPropagation pars({checkStopPropagationVar}, {checkStopPropagationAdditionalVar}) after 1s;
 	}
 	#checkStopPropagationDiv:click {
 		var: checkStopPropagationVar 1;
@@ -1684,16 +1680,16 @@ create-element-tag:connectedCallback {
 			varTestArray['array'] [],
 			varTestArray['array']['subAssign'] {},
 			varTestArray['array']['subAssign'].dave true,
-			varTestArrayAssign varTestArray['array']['subAssign'].dave
+			varTestArrayAssignProp {varTestArray['array']['subAssign'].dave}
 		;
-		func: checkVar "{varTestString}"
-			{varTestBooleanTrue}
-			{varTestBooleanFalse}
-			{varTestBooleanDigitPositive}
-			{varTestBooleanDigitNegative}
-			{varTestEvaluatedNumber}
-			"{window.varTestWinVar}"
-			{varTestArrayAssign}
+		func: checkVar pars({varTestString},
+			{varTestBooleanTrue},
+			{varTestBooleanFalse},
+			{varTestBooleanDigitPositive},
+			{varTestBooleanDigitNegative},
+			{varTestEvaluatedNumber},
+			{window.varTestWinVar},
+			{varTestArrayAssignProp})
 		;
 	}
 	html {
@@ -1809,6 +1805,30 @@ create-element-tag:connectedCallback {
 	#continueAfterElementRemovalDivElDoesNotExist {
 		var: continueAfterElementVar "This shouldn't run at all";
 	}
-	func: continueAfterElementRemovalFinal "{continueAfterElementVar}";
+	func: continueAfterElementRemovalFinal {continueAfterElementVar};
+}
+
+
+#content:draw {
+	render-before-end: "<div id=\"quoteCheckOnSetAttributeAndSetProperty\" data-desc=\"Core - check setting attributes and properties with double quotes\" class=\"coreTest\">{|quoteCheckOnSetAttributeAndSetPropertyHTML}</div>";
 }
 
+@component quoteCheckOnSetAttributeAndSetPropertyHTML {
+	&:componentOpen {
+		#quoteCheckOnSetAttributeAndSetPropertyButton {
+			trigger-real: click;
+		}
+	}
+	html {
+		<button id="quoteCheckOnSetAttributeAndSetPropertyButton" data-quoted='was "Test Stuff".''>test</button>
+		<div id="quoteCheckOnSetAttributeAndSetPropertyTarget"></div>
+	}
+}
+
+#quoteCheckOnSetAttributeAndSetPropertyButton:click {
+	#quoteCheckOnSetAttributeAndSetPropertyTarget {
+		set-attribute: data-quoted-target "{@data-quoted}";
+		set-property: value "{@data-quoted}";
+		func: quoteCheckOnSetAttributeAndSetPropertyFinal pars("{@data-quoted-target}", "{@@value}");
+	}
+}

core-test/startup/compiled/core-test-js.js

@@ -2218,7 +2218,7 @@ function checkVar(o, pars) {
 	_shouldBe(checkVarEl, 'varTestEvaluatedNumber', pars[5], 8);
 	_shouldBe(checkVarEl, 'window.varTestWinVar as a parameter', pars[6], 'hello');
 	_shouldBe(checkVarEl, 'window.varTestWinVar as a variable', window.varTestWinVar, 'hello');
-	_shouldBe(checkVarEl, 'varTestArrayAssign', pars[7], true);
+	_shouldBe(checkVarEl, 'varTestArrayAssignProp', pars[7], true);
 
 	// The test will not pass if any of the above comparisons fail. The success flag added below will be ignored by the test system.
 	_addSuccessClass(checkVarEl);
@@ -2317,3 +2317,19 @@ function continueAfterElementRemovalFinal(o, pars) {
 		}
 	}
 }
+
+function quoteCheckOnSetAttributeAndSetPropertyFinal(o, pars) {
+	let quoteCheckOnSetAttributeAndSetPropertyEl = _initTest('quoteCheckOnSetAttributeAndSetProperty');
+	if (!quoteCheckOnSetAttributeAndSetProperty) return;
+
+	let el = _getObj('#quoteCheckOnSetAttributeAndSetPropertyTarget');
+	if (!el) {
+		_fail(quoteCheckOnSetAttributeAndSetPropertyEl, '#quoteCheckOnSetAttributeAndSetPropertyTarget is not present for attribute/property check.');
+	}
+
+	_shouldBe(quoteCheckOnSetAttributeAndSetPropertyEl, 'attribute', pars[0], 'was "Test Stuff".');
+	_shouldBe(quoteCheckOnSetAttributeAndSetPropertyEl, 'property', pars[1], 'was "Test Stuff".');
+
+	// The test will not pass if any of the above comparisons fail. The success flag added below will be ignored by the test system.
+	_addSuccessClass(quoteCheckOnSetAttributeAndSetPropertyEl);
+}

core-test/tests/commands/built-in/create-element/checkCreateElement.acss

@@ -41,7 +41,7 @@ create-element-tag:connectedCallback {
 }
 
 #checkCreateElementDiv:draw {
-	func: checkCreateElement {createElementConnectCallbackVar} {createElementDisconnectedCallbackVar} {createElementAttributeChangeVar} after 1s;
+	func: checkCreateElement pars({createElementConnectCallbackVar}, {createElementDisconnectedCallbackVar}, {createElementAttributeChangeVar}) after 1s;
 }
 
 #checkCreateElement:test {

core-test/tests/commands/built-in/func/checkFunc.acss

@@ -11,12 +11,12 @@
 	func: checkFuncFalse false;
 /*	
 	Still to set up:
-	func: checkFuncArr [1, 2, "cheesey wotsit"];
-	func: checkFuncObj {dave: "hi"};
-	func: checkFuncWinVar window.globIt;
-	func: checkFuncACSSVar {myACSSVariable};
-	func: checkFuncExpr {= 7 + 10 =};
-	func: checkFuncCombined [1, 2, "cheesey wotsit"] {dave: "hi"} window.globIt {myACSSVariable} {= new Date =};*/
+	func: checkFuncArr pars([1, 2, "cheesey wotsit"]);
+	func: checkFuncObj pars({dave: "hi"});
+	func: checkFuncWinVar pars(window.globIt);
+	func: checkFuncACSSVar pars({myACSSVariable});
+	func: checkFuncExpr pars({= 7 + 10 =});
+	func: checkFuncCombined pars([1, 2, "cheesey wotsit"], {dave: "hi"}, window.globIt, {myACSSVariable}, {= new Date =});*/
 
 	func: checkFuncFinal;
 }

core-test/tests/commands/built-in/prevent-default/checkPreventDefault.acss

@@ -8,8 +8,6 @@
 	}
 	a:draw {
 		trigger-real: click;
-	}
-	a:afterTriggerReal {
 		func: checkPreventDefault;	/* If prevent-default works at all then passing the test in the function will be enough. */
 	}
 	html {

core-test/tests/commands/built-in/prevent-default/checkPreventDefaultShadow.acss

@@ -8,8 +8,6 @@
 	}
 	a:draw {
 		trigger-real: click;
-	}
-	a:afterTriggerReal {
 		func: checkPreventDefaultShadow;	/* If prevent-default works at all then passing the test in the function will be enough. */
 	}
 	html {

core-test/tests/commands/built-in/render/checkRender.acss

@@ -10,7 +10,7 @@
 	&:componentOpen {
 	    #renderHTMLExample {
 	        render: "<span id=\"checkRenderTestDiv\"><strong>render</strong></span>";
-			func: checkRender;
+			func: checkRender after 100ms;
 	    }
 		#renderEscapePTag {
 	        render-after-end: "<span id=\"checkRenderAttrSubHack\">{@data-hackA}</span>" after stack;

core-test/tests/commands/built-in/stop-event-propagation/checkStopEventPropagation.acss

@@ -8,7 +8,7 @@
 	}
 	#checkStopEventPropagationDiv:draw {
 		trigger-real: click;
-		func: checkStopEventPropagation {checkStopEventPropagationVar} {checkStopEventPropagationAdditionalVar} after 1s;
+		func: checkStopEventPropagation pars({checkStopEventPropagationVar}, {checkStopEventPropagationAdditionalVar}) after 1s;
 	}
 	#checkStopEventPropagationDiv:click {
 		var: checkStopEventPropagationVar 1;