Codestin Search App

frenzzy · 2018-03-01T04:33:50Z

Fixes #628

With this change we may rich consistent behavior between client and server rendering for reserved DOM attributes such as spellcheck or draggable, see:

before

<input spellcheck="false" /> // => <input spellcheck="true" /> <== Oh NO!
<input spellcheck={false} /> // => <input spellcheck="false" />

after

<input spellcheck="false" /> // => <input spellcheck="false" /> <== Oh YES!
<input spellcheck={false} /> // => <input spellcheck="false" />

SSR

<input spellcheck="false" /> // => <input spellcheck="false" />
<input spellcheck={false} /> // => <input />

codecov · 2018-03-01T04:35:42Z

Codecov Report

Merging #629 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #629   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           1      1           
  Lines         166    166           
  Branches       52     52           
=====================================
  Hits          166    166

Impacted Files	Coverage Δ
src/index.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ebdfc2c...23778ee. Read the comment docs.

jorgebucaran · 2018-03-01T04:35:46Z

How is this different to #592?

frenzzy · 2018-03-01T04:45:18Z

#592 behavior:

// before
<input spellcheck="false" data-x="false" /> // => <input spellcheck="true" data-x="false" />
<input spellcheck={false} data-x={false} /> // => <input spellcheck="false" />

// after
<input spellcheck="false" data-x="false" /> // => <input spellcheck="true" data-x="false" />
<input spellcheck={false} data-x={false} /> // => <input spellcheck="false" data-x="false" />

// SSR
<input spellcheck="false" data-x="false" /> // => <input spellcheck="false" data-x="false" />
<input spellcheck={false} data-x={false} /> // => <input />

so, this PR is about reserved DOM attributes while #592 is about custom DOM attributes.

frenzzy · 2018-03-02T14:13:40Z

        (name in element && name !== "list" && !isSVG)
      ) {
-        element[name] = value == null ? "" : value
+        element[name] = value == null || value === "false" ? "" : value


or we can use regex here: /^false$/i.test(value)
it will be more robust (users can use False, FALSE etc) but slower

<input spellcheck="false" /> // => <input spellcheck="false" /> <input spellcheck="False" /> // => <input spellcheck="true" /> <input spellcheck="FALSE" /> // => <input spellcheck="true" /> // vs regexp <input spellcheck="false" /> // => <input spellcheck="false" /> <input spellcheck="False" /> // => <input spellcheck="false" /> <input spellcheck="FALSE" /> // => <input spellcheck="false" />

HTML spec allow different cases ?

Yes, HTML case insensitive

jorgebucaran · 2018-03-03T08:45:39Z

Unrelated but related. Adding it here before I forget. preactjs/preact#983

jorgebucaran · 2018-03-07T18:38:59Z

@frenzzy But why not use {false}?

frenzzy · 2018-03-08T05:50:23Z

@frenzzy But why not use {false}?

Because false does't render attribute at all:

<input data-example={false} /> // renders <input />

Also "false" already works correctly for most of attributes:

<input data-example="false" /> // renders <input data-example="false" />

The problem only in bunch of DOM attributes such as spellcheck, dragging etc.

After this change "false" not longer converted to "true" for SOME attributes.
Which makes "false" value consistent between different attributes and server-side rendering.

jorgebucaran · 2018-03-08T05:57:07Z

@frenzzy Why does "false" work for some attributes and not for others? I am trying to leave this information documented here for our record.

frenzzy · 2018-03-08T06:07:30Z

@frenzzy Why does "false" work for some attributes and not for others?

Because of the way how we modify attributes (props vs attributes):
https://github.com/hyperapp/hyperapp/blob/fa8fdd373539c386c2bca45dfd185ba5047f6f1a/src/index.js#L163

const el = document.createElement('input')

el.spellcheck = false                   // => <input spellcheck="false" />
el.spellcheck = 'false'                 // => <input spellcheck="true" /> !!! Noooo...
el.setAttribute('spellcheck', false)    // => <input spellcheck="false" />
el.setAttribute('spellcheck', 'false')  // => <input spellcheck="false" />
el.setAttribute('data-custom', false)   // => <input data-custom="false" />
el.setAttribute('data-custom', 'false') // => <input data-custom="false" />

see also #634

frenzzy · 2018-03-13T11:07:55Z

Looks like hyperapp has problems with all kind of boolean attribute values "true"/"false", "yes"/"no" and "on"/"off", for example:

// jsx                     => html
<div translate="yes" /> // => <div translate="yes"></div>
<div translate="no" />  // => <div translate="yes"></div> <= No!

Probably related: react/react#10589

jorgebucaran · 2018-03-13T12:14:34Z

I think we should make only {true} or {false} work and doing that, fix that horrible "yes", "no", "on", "off", etc., API.

frenzzy · 2018-03-29T09:04:59Z

Demos:

master branch: https://codepen.io/frenzzy/pen/Zxrrzz/left/?editors=0010
current branch: https://codepen.io/frenzzy/pen/EEQoBP/left/?editors=0010

frenzzy · 2018-03-29T18:21:32Z

I think we should make only {true} or {false} work and doing that, fix that horrible "yes", "no", "on", "off", etc., API.

It is not obvious for user why "false" does not work properly for some attributes. He writes "false" hyperapp renders "true" - WTF!?
It is not possible to render some attributes in isomorphic manner. If use {false}, server will not render it, if use "false", hyperapp will change it to "true".
User should always keep in mind list of attributes which works incorrectly, see https://codepen.io/frenzzy/pen/Zxrrzz/left/?editors=0010

jorgebucaran · 2018-04-06T09:28:47Z

Let's wait after 2.0. Then let's figure out what to do.

jorgebucaran · 2018-07-06T02:57:46Z

+      } else if (
+        name in element &&
+        name !== "list" &&
+        !(typeof value === "string" && typeof element[name] === "boolean") &&


@frenzzy What about only typeof value === "string"?

So, removing typeof element[name] === "boolean".

Nevermind :D

jorgebucaran · 2018-07-18T10:20:32Z

Thanks, @frenzzy! 1.2.8 🎉

jorgebucaran mentioned this pull request Mar 1, 2018

Certain attributes behave differently given the same value #628

Closed

frenzzy commented Mar 2, 2018

View reviewed changes

jorgebucaran added the FIX label Mar 2, 2018

frenzzy force-pushed the falsey-attributes branch from ee94ef1 to 975f203 Compare March 8, 2018 05:52

frenzzy force-pushed the falsey-attributes branch 2 times, most recently from a02b0d9 to 0b88944 Compare March 9, 2018 09:32

frenzzy force-pushed the falsey-attributes branch 2 times, most recently from b8fef98 to b8d26a2 Compare March 16, 2018 09:37

frenzzy force-pushed the falsey-attributes branch 2 times, most recently from de86cf8 to ef44361 Compare March 29, 2018 08:46

frenzzy force-pushed the falsey-attributes branch from ef44361 to c0f3013 Compare March 29, 2018 18:12

frenzzy changed the title ~~Falsey attributes~~ Boolean attributes Mar 29, 2018

frenzzy force-pushed the falsey-attributes branch 3 times, most recently from bda9768 to 11c99a0 Compare March 31, 2018 06:58

jorgebucaran added the FUTURE label Apr 6, 2018

jorgebucaran removed the MAYBE label Jul 3, 2018

jorgebucaran reviewed Jul 6, 2018

View reviewed changes

Boolean attributes

23778ee

frenzzy force-pushed the falsey-attributes branch from 11c99a0 to 23778ee Compare July 18, 2018 10:11

jorgebucaran merged commit aa2ce46 into jorgebucaran:master Jul 18, 2018

frenzzy deleted the falsey-attributes branch July 18, 2018 10:17

frenzzy mentioned this pull request Aug 21, 2018

Doubt with the disabled attribute #745

Closed

frenzzy referenced this pull request Mar 12, 2019

Simplify updateProperty

c4a00e7

Conversation

frenzzy commented Mar 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Mar 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jorgebucaran commented Mar 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frenzzy commented Mar 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frenzzy Mar 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Swizz Mar 2, 2018

Choose a reason for hiding this comment

Uh oh!

frenzzy Mar 2, 2018

Choose a reason for hiding this comment

Uh oh!

jorgebucaran commented Mar 3, 2018

Uh oh!

jorgebucaran commented Mar 7, 2018

Uh oh!

frenzzy commented Mar 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jorgebucaran commented Mar 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frenzzy commented Mar 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frenzzy commented Mar 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jorgebucaran commented Mar 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frenzzy commented Mar 29, 2018

Uh oh!

frenzzy commented Mar 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jorgebucaran commented Apr 6, 2018

Uh oh!

jorgebucaran Jul 6, 2018

Choose a reason for hiding this comment

Uh oh!

jorgebucaran Jul 6, 2018

Choose a reason for hiding this comment

Uh oh!

jorgebucaran commented Jul 18, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

frenzzy commented Mar 1, 2018 •

edited

Loading

codecov Bot commented Mar 1, 2018 •

edited

Loading

jorgebucaran commented Mar 1, 2018 •

edited

Loading

frenzzy commented Mar 1, 2018 •

edited

Loading

frenzzy Mar 2, 2018 •

edited

Loading

frenzzy commented Mar 8, 2018 •

edited

Loading

jorgebucaran commented Mar 8, 2018 •

edited

Loading

frenzzy commented Mar 8, 2018 •

edited

Loading

frenzzy commented Mar 13, 2018 •

edited

Loading

jorgebucaran commented Mar 13, 2018 •

edited

Loading

frenzzy commented Mar 29, 2018 •

edited

Loading