fix(core): Correctly deal with user input (QwikDev#20)

Fixes QwikDev#18
willkuerlich · Jun 30, 2021 · 76579e9 · 76579e9
1 parent 9d37d05
commit 76579e9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -20,8 +20,7 @@ An Open-Source framework designed for best possible [time to interactive](https:
 ## Blog Posts
 
 - [A first look at Qwik - the HTML first framework](https://dev.to/mhevery/a-first-look-at-qwik-the-html-first-framework-af)
-- [Death by Closure (and how Qwik solves it)
-](https://dev.to/mhevery/death-by-closure-and-how-qwik-solves-it-44jj)
+- [Death by Closure (and how Qwik solves it)](https://dev.to/mhevery/death-by-closure-and-how-qwik-solves-it-44jj)
 
 ## Community
 

diff --git a/cypress/integration/todo_spec.ts b/cypress/integration/todo_spec.ts
@@ -11,7 +11,10 @@
 describe('todo', () => {
   ['/todo/', '/todo/client.html'].forEach((url) => {
     describe(url, () => {
-      beforeEach(() => cy.visit(url));
+      beforeEach(() => {
+        cy.visit(url);
+        cy.wait(10);
+      });
       it('should start with 3 items', () => {
         cy.get('.todo-count > strong').should((strong) => expect(strong).to.have.text('3'));
       });
@@ -75,6 +78,20 @@ describe('todo', () => {
         cy.get('.clear-completed').click();
         cy.get('.main li').should('have.length', 2);
       });
+
+      it('should properly clear completed items', () => {
+        // Mark as completed
+        cy.get('.todo-list>li:nth-child(2) input').click();
+        cy.get('.todo-count > strong').should((strong) => expect(strong).to.have.text('2'));
+
+        // click completed
+        cy.get('footer li:first').click();
+        cy.get('.clear-completed').click();
+        cy.get('.main li').should('have.length', 2);
+
+        // assert nothing is checked
+        cy.get('input[type=checkbox]').should((input) => expect(input).not.to.be.checked);
+      });
     });
   });
 });
diff --git a/integration/todo/server_index.tsx b/integration/todo/server_index.tsx
@@ -21,7 +21,7 @@ export async function serverMain(document: Document) {
     <html>
       <head>
         <title>ToDo Application</title>
-        <script src="/qwikloader.js" type="module" events="click;dblclick;keyup;blur"></script>
+        <script src="/qwikloader.min.js" type="module" events="click;dblclick;keyup;blur"></script>
         <link rel="q.protocol.ui" href="./ui" />
         <link rel="q.protocol.data" href="./data" />
         <link rel="q.protocol.base" href="./" />

diff --git a/src/core/render/jsx/attributes.ts b/src/core/render/jsx/attributes.ts
@@ -150,12 +150,14 @@ export function setAttribute(element: Element, key: string, value: any, kebabKey
   } else if (key === 'innerHTML' || key === 'innerText') {
     element.setAttribute(kebabKey!, '');
     (element as any)[key] = value;
-  } else if (element.tagName === 'INPUT' && key.indexOf(':') == -1) {
-    element.setAttribute(key, String(value));
-    (element as any)[key] = value;
   } else {
     element.setAttribute(key, String(value));
   }
+  if ((key == 'value' || key == 'checked') && element.tagName === 'INPUT') {
+    // INPUT properties `value` and `checked` are special because they can go out of sync
+    // between the attribute and what the user entered, so they have special treatment.
+    (element as any)[key] = value;
+  }
 }
 
 /**

diff --git a/src/qwikloader.ts b/src/qwikloader.ts
@@ -44,18 +44,15 @@
       const eventUrl = element.getAttribute('on:' + ev.type);
       if (eventUrl) {
         const url = new URL(
-          eventUrl.replace(/^(\w+):(\/)/, (str, protocol, slash) => {
+          eventUrl.replace(/^(\w+):(\/)?/, (str, protocol, slash) => {
             const linkElm = doc.querySelector(
               `link[rel="q.protocol.${protocol}"]`
             ) as HTMLLinkElement;
             const href = linkElm && linkElm.href;
             if (!href) {
               throw new Error('QWIKLOADER-ERROR: `' + protocol + '` is not defined.');
             }
-            if (slash && href.endsWith('/')) {
-              slash = '';
-            }
-            return href + slash;
+            return href + (href.endsWith('/') ? '' : slash || '');
           })
         );
         const importPath = url.pathname + '.js';