Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make directives handle any data thrown at them #1519

Closed
jacwright opened this issue May 31, 2018 · 2 comments
Closed

Make directives handle any data thrown at them #1519

jacwright opened this issue May 31, 2018 · 2 comments

Comments

@jacwright
Copy link
Contributor

Related to better error checking (#1518) we could make templates "smarter" and easier to use, taking error handling to these next levels:

  1. make the directives handle undefined/null cases more elegantly
  2. make the expressions null-check automatically

For the first level, EachBlock can check for null and treat it as an empty array. Attribute and text bindings can check for null and set an empty string instead of undefined

The second level makes it even easier. In my old framework each expression in the template was converted to a getter function that allowed no-ops for null errors. I took what CoffeeScript was doing to convert an expression with the existential operator on accessors like foo?.bar?.doit?() and making it standard in every expression. See https://github.com/chip-js/expressions-js. But I did it using regex (not ideal) instead of something better like Acorn. It would convert

user.name

to

function() {
  var _ref1;
  return (_ref1 = this.user) == null ? void 0 : _ref1.name;
}

And all the directives were coded to handle undefined so a simple text binding { user.name } would give an empty string if user or user.name were undefined or null. Makes is much more noob friendly and simplifies template code.

Upsides

  1. less code needing being written for null checks
  2. fewer breaking errors in your app once it goes to production
  3. easier for Svelte noobs to get going if they don't have to worry about how the data will act, if the directives are resilient to whatever data they receive

Downsides

  1. increased bundle size
  2. users confused when their data isn't showing up because errors aren't popping

Perhaps there could be helpers in shared.js that would accomplish the same thing as the generated functions, similar to lodash's _.get(obj, 'prop.subprop').

As for users being confused, I think that will always be the case whatever you do. They can simply view the state of their data to see why it isn't showing.

@jacwright
Copy link
Contributor Author

#1679 gives actions this super-power.

@jacwright
Copy link
Contributor Author

#1685 (class directives) allows any expression too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants