Code Monkey home page Code Monkey logo

ember-let's Introduction

ember-let

npm version Ember Observer Score Build Status

ember-let is an addon for binding variables to template contexts in Ember. It behaves much like the with helper, but lets you bind an arbitrary number of variables, including standalone values, hashes, and class instances. However, unlike with, the let helper will yield its block even if the bound values are undefined, null, or []. This has the benefit of allowing the user to treat the block values as true variable bindings rather than simply aliases to existing values.

See examples below:

Bind basic values

{{#let "abc" "123" as |first second|}}
  <li>{{first}}</li>
  <li>{{second}}</li>
{{/let}}

Mix hashes and standalone values

{{#let (hash first="first" second="second") "third" as |hash standalone|}}
  <li>{{hash.first}}</li>
  <li>{{hash.second}}</li>
  <li>{{standalone}}</li>
{{/let}}

Bind a class instance returned from a helper

{{#let (boolean) as |bool|}}
  {{bool.value}} - <button onClick={{action bool.toggle}}>toggle</button>
{{/let}}

Inline use Note: requires Ember 2.0+ (ie. does not support 1.13)

{{let greeting=(concat "hello " to)}}
{{greeting}} - <button {{action (action (mut to) "world")}}>Greet the world!</button>  

Inline let declarations are in scope until the parent element or block is closed, for example:

{{#if person.isActive}}
  <div>
    {{let name=person.name}}
    <span>{{name}}</span>
  </div>
  {{!-- The name binding is not accessible here... --}}
{{/if}}
{{!-- ...or here. -- }}

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms, which can be found in the CODE_OF_CONDUCT.md file in this repository.

ember-let's People

Contributors

cafreeman avatar cowboyd avatar ember-tomster avatar heroiceric avatar jasonmit avatar mmun avatar robdel12 avatar rwjblue avatar taras avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ember-let's Issues

TypeError: Invalid Version: undefined

I'm not sure if this is an issue with ember-let or ember-cli-version-checker.

Here's the stack trace.

Invalid Version: undefined
TypeError: Invalid Version: undefined
    at new SemVer (/Users/mingliu/Workspace/prime/node_modules/ember-cli-version-checker/node_modules/semver/semver.js:281:11)
    at compare (/Users/mingliu/Workspace/prime/node_modules/ember-cli-version-checker/node_modules/semver/semver.js:571:10)
    at Function.lt (/Users/mingliu/Workspace/prime/node_modules/ember-cli-version-checker/node_modules/semver/semver.js:605:10)
    at DependencyVersionChecker.(anonymous function) [as lt] (/Users/mingliu/Workspace/prime/node_modules/ember-cli-version-checker/index.js:72:26)
    at Class.setupPreprocessorRegistry (/Users/mingliu/Workspace/prime/node_modules/ember-let/index.js:12:39)

I think the issue stem from ember moved bower package to npm. So when checker.for('ember', 'bower').lt('2.0.0') tries to check for it, it throws because it expects the bower package.

`ember-let` fails to work with Ember ~3.1. `ember-glimmer/syntax` package does not exist.

Version of ember-let:

0.7.1

Ember Version / Ember CLI Version:

Ember Version: 3.1.4
Ember CLI Version: 3.2.0

Expected Behavior

The Ember app or tests should run as normal.

Actual Behavior

An exception is thrown when trying to load the code to register the ember-let macro and the page fails to load.

const { registerMacros } = Ember.__loader.require('ember-glimmer/syntax');

The ember-glimmer/syntax package no longer exists in Ember ~3.1 and throws the following exception.

Uncaught Error: Could not find module ember-glimmer/syntax
    at missingModule (loader.js:12)
    at internalRequire (loader.js:34)
    at Object.requireModule [as require] (loader.js:84)
    at register.js:2

Steps To Reproduce:

  1. Install ember-source ~3.1
  2. Run ember s
  3. The page fails to load and exceptions are thrown in the console

Ember Twiddle / Example repo / Failing test:

https://github.com/patocallaghan/ember-let-bug

Proposal: inline let

I had an idea recently of how we could create an inline version of let helper that'd automatically update a variable when calculation changes.

For example,

{{let hello "world"}}
{{hello}}

Would output "world".

This value would also be reactive, so it'll automatically update the variable binding when calculation changes.

{{let greeting (concat "hello " to)}}

{{greeting}}

<button {{action (mut to) "world"}}>To world</button>

Would output "hello " first, on click of button would set to to "world" and render "hello world".

I can be useful to define variables that apply to the entire template without introducing nesting and to define reactive variables that change based on computation.

Block let not working in Addon

Version of ember-let: 0.5.2

Ember Version / Ember CLI Version:

Ember Version: 2.9.0-beta.5
Ember CLI Version: 2.9.0-beta.2

Expected Behavior

In a template in an an addon I am using:

{{#each _items as |item|}}
      {{#let (or item.id (concat id '-' (auto-id 10))) as |itemId|}}
        {{component (concat 'ui-' type '-item')
          id=itemId
          value=item
          size=size
          selected=(includes _selected itemId)
          disabled=(includes _disabled itemId)
          onClick=(action 'onClick')
          onHover=(action 'onHover')
          onFocus=(action 'onFocus')
        }}
      {{/let}}
 {{/each}}

In this same addon I have included ember-let in the "dependencies" section of package.json. This combination works fine for the dummy app of the addon but when I consume this addon I get the error: Assertion Failed: A helper named "let" could not be found. The stacktrace is meaningless but I'm not using this addon at all in the consuming app so I think the description above should adequately make this reproducible.

Ember Twiddle / Example repo / Failing test:

Not really reproducible in Twiddle due to the Addon-to-Addon-to-App nature of this defect.

Failing build on CircleCI

V0.7.0

Ember 2.15

Expected Behavior

Ember builds on Circle CI

Actual Behavior

Ember does not build and instead throws the error emberDep.gte is not a function

Steps To Reproduce:

Locally this does not cause an issue for me because the ember-cli-version-checker version installed is 2.1.0, but on CI it resolves to 1.2.0

Resolution

I've added `ember-cli-version-checker: ^2.1.0 to my package.json and CI is building again. I can make a PR to bump the dependency of the ember-cli-version-checker in this repo, I think it shouldn't cause any issues.

Ember 2.12.2: Could not find module `ember` imported from `(require)`

Version of ember-let:

0.5.4

Ember Version / Ember CLI Version:

Ember Version: 2.12.2
Ember CLI Version: 2.12.2

Behavior

After upgrading from 2.10.0 to 2.12.2, ember-let (latest, 0.5.4) is crashing my app on load in the browser (it builds without errors though):

image

The offending code from this add-on:

image

If I remove ember-let from my app, things work fine. Any near future plans to make this work with the newest Ember?

Fails with ember 2.15 due to @glimmer/runtime change

Version of ember-let: 0.6.0

Ember Version / Ember CLI Version:

Ember Version: 2.15.0
Ember CLI Version: 2.15.0

Expected Behavior

ember-let should still work

Actual Behavior

ember-let blows up with

TypeError: compileArgs is not a function
    at register.js:33
    at Blocks.compile (runtime.js:4415)
    at runtime.js:4067
    at Compilers.compile (runtime.js:3958)
    at compileStatement (runtime.js:4714)
    at compileStatements (runtime.js:4719)
    at CompilableTemplate.compileStatic (runtime.js:4744)
    at runtime.js:845
    at AppendOpcodes.evaluate (runtime.js:70)
    at VM.next (runtime.js:7244)

It seems the @glimmer/runtime API used at

let args = compileArgs(params, hash, builder);
has changed.

Steps To Reproduce:

  1. upgrade to ember 2.15

Ember Twiddle / Example repo / Failing test:

I tried to make a twiddle but looks like ember 2.15 isn't supported yet.

consider key="" semantics?

Another possibly dumb proposal:

http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_specifying-keys

Ember's #each helper let's you specify an optional key= param for reconciling values/elements before and after a render, such that if an array element after a render has a key that matches one before render, the component will be reused, won't be rebuilt, etc.

I've found that sometimes I want this in a non-array context; I want to be able to opt into re-rendering a component if a value driving it has changed, since in some cases this keeps the component logic simpler; I don't have to know any special and maybe-likely-to-be-changed didUpdateAttrs hooks and what not, I just have to write a component and implement didInsertElement. I wanted this when implementing a singleton tooltip that set it's location depending on the currently active element that was passed into it; because this feature didn't exist I had to resort to observers which don't have the benefit of the debounced render timing that most component rendering falls into.

So anyway it might be nice if ember-let had a key= option with similar semantics as the each helper. The default value would be @index, which is to say let is basically an each against a single element array with the value you're letting. But it could be changed to @identity to re-render the block and any components inside it if the object is switched out in any way, or it could be some property of the object from which a key should be derived.

This would basically close the gap between Ember's each-specific concept of keys vs React's universal concept of keys.

{{#let activeElement key="@identity" as |el|}}
  {{tooltip-that-gets-totally-rerendered-whenever-el-changes el=el}}
{{/let}}

Not working after upgrade to Ember 2.10.0

Version of ember-let: 0.5.3

Ember Version / Ember CLI Version:

Ember Version: 2.10.0
Ember CLI Version: 2.10.0-beta.2

Expected Behavior

Before I updated (from Ember 2.7.0), the {{let}} helper worked OK.

Actual Behavior

After upgrade to Ember 2.10.0, {{let}} helpers are throwing this error:

Uncaught TypeError: args.evaluate is not a function(…)

Steps To Reproduce:

  1. Simply writing {{let test="test"}} throws said error in my app. I wanted to reproduce in Twiddle, but sadly it doesn't support 2.10.0.

add warning to inline form for users of < 2.0

With the inline form being implemented as an AST transform, users should never actually see a version of the let helper that gets invoked at runtime without an associated block.

We want to issue a warning that the inline form cannot be used without Ember >= 2.0

We need AST transform tests

I've been experimenting with inline let and it behaves unpredictably. There could be something wrong with the AST transform code. We need to add node tests for it.

Uncaught Error: Could not find module glimmer-runtime

Version of ember-let:

0.5.4

Ember Version / Ember CLI Version:

Ember Version:

2.13.0-beta.1

Ember CLI Version:

Expected Behavior

Not throw error

Actual Behavior

Thrown error

Steps To Reproduce:

Just run ember-let with 2.13.0-beta.1 should be enough to produce the error.

I believe glimmer-runtime no longer exist in 2.13

var StatementSyntax = Ember.__loader.require('glimmer-runtime').StatementSyntax;

Ember Twiddle / Example repo / Failing test:

https://travis-ci.org/ming-codes/ember-ui-kit/jobs/211936752

consider aliasing if-let to with?

I don't feel super strongly about this but maybe it'd be nice for this library to also alias if-let to with? Rationale: with is an unfortunate name whose falsy inverse behavior is unexpected, whereas if-let speaks more to its semantics and putting it in this addon might be a nice way to collectively nudge folks away from with.

args.evaluate is not a function in ember 2.10.0 addon

Version of ember-let: 0.5.3

Ember Version / Ember CLI Version:

**Ember Version: 2.10.0
**Ember CLI Version: 2.9.1

Steps To Reproduce:

  1. run ember addon my-ember-let
  2. open tests/dummy/app/templates/application.hbs
  3. Write the following:
{{#let 'life is hard' as |truth|}}
  Why doesn't ember-let work straight out the box? Because {{truth}}
{{/let}}
  1. Run ember s and navigate to localhost:4200

Expected Behavior

I expect to see the string rendered

Actual Behavior

Instead, I get the following error:

 Uncaught TypeError: args.evaluate is not a function(…)evaluateArgs @ ember.debug.js:53481
evaluate @ ember.debug.js:48764
execute @ ember.debug.js:53448
render @ ember.debug.js:53022
RootState.render @ ember.debug.js:11345
runInTransaction @ ember.debug.js:22304
_renderRoots @ ember.debug.js:11610
_renderRootsTransaction @ ember.debug.js:11648
_renderRoot @ ember.debug.js:11569
_appendDefinition @ ember.debug.js:11482
appendOutletView @ ember.debug.js:11465
invoke @ ember.debug.js:337
flush @ ember.debug.js:407
flush @ ember.debug.js:531
end @ ember.debug.js:601
run @ ember.debug.js:724
join @ ember.debug.js:746
run.join @ ember.debug.js:21562
(anonymous function) @ ember.debug.js:21625
fire @ jquery.js:3187
fireWith @ jquery.js:3317
ready @ jquery.js:3536
completed @ jquery.js:3552

Ember Twiddle / Example repo / Failing test:

https://github.com/foxnewsnetwork/ember-let-args-evaluate

References

Presumably, whatever @rwjblue did in 96c4a08 to fix let not being registered in addons in 2.10.x isn't enough, something about core glimmer functionality is different.

Probably a continuation of #26

Current Workaround

Opiton 1: Downgrading to ember 2.9.1 from 2.10.0 makes this thing work again.

Badges! and other assorted OSS goodness

@Robdel12 put together a checklist somewhere of what an FS OSS repo should be. I can't find it, but it should probably be linked from the oss-wumbo README.

Seems like once we nail these, we can remove the WIP tag.

`ember-let` in `dependencies` of add-on causes build failure

Version of ember-let: 0.5.2

Ember Version / Ember CLI Version:

Ember Version: 2.8.0
Ember CLI Version: 2.8.0

Expected Behavior

When consuming ember-let as a dependency in an addon, the addon should build successfully.

Actual Behavior

When running ember s or ember build, the build fails and throws the following error:

Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at RegExp.exec (native)
    at posixSplitPath (path.js:411:27)
    at Object.posix.basename (path.js:552:11)
    at Function.Module._resolveLookupPaths (module.js:247:37)
    at Function.Module._resolveFilename (module.js:316:31)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Project.emberCLIVersion (/Users/cf_frontside/app/node_modules/ember-cli/lib/utilities/version-utils.js:10:20)
    at getEmberCLIVersion (/Users/cf_frontside/app/node_modules/ember-cli-version-checker/index.js:12:31)
    at DependencyVersionChecker.EmberCLIDependencyVersionChecker (/Users/cf_frontside/app/node_modules/ember-cli-version-checker/index.js:115:19)
    at Function.deprecatedIsAbove [as isAbove] (/Users/cf_frontside/app/node_modules/ember-cli-version-checker/index.js:122:27)
    at CoreObject.module.exports.shouldSetupRegistryInIncluded (/Users/cf_frontside/app/node_modules/ember-cli-babel/index.js:13:21)

Steps To Reproduce:

  1. run ember addon some-thing to produce a fresh addon
  2. Run ember install ember-let
  3. Move the ember-let dependency from devDependencies to dependencies
  4. run ember s

Integration tests require calling `register-let-helper` initialize function

Version of ember-let: 0.4.0

Ember Version / Ember CLI Version

Ember Version: any
Ember CLI Version: 2.7.0

Expected Behavior

When using let helper in an addon, consumers of the addon should not have to know how my addon is created to do integration testing.

Actual Behavior

Integration tests fail with Error: Assertion Failed: A helper named "let" could not be found because let helper is not initialized.

Steps To Reproduce:

  1. Create an addon
  2. Install ember-let
  3. Add let helper to a template of a component
  4. Create an integration test that renders the component
  5. See the error

Ember Twiddle / Example repo / Failing test:

Please create a reproduction of your bug with this ember-twiddle. This is extremely helpful and speeds up the debugging process.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.