machty / emblem.js

Emblem.js - Ember-friendly, indented syntax alternative for Handlebars.js
http://emblemjs.com
MIT License
1.04k stars 81 forks source link

Added ability for describe bracketed modifiers #344

Open evgenibir opened 3 years ago

evgenibir commented 3 years ago

Hey all! I noticed that #336 and 335 and fixed it. Please let me know your opinion.

like this live examples

%content [
  {did-insert this.addHandlers}
  {will-destroy this.removeHandlers}

  class=@class
  role={or @role "listbox"}
  ...attributes
]
  %select-header.ember-power-select-search.searchbox
    %Input.ember-power-select-search-input.searchinput{on "keydown" this.handleKeydown} [
      {did-insert this.focusInput}
      {will-destroy this.clearSearch}
      {on "input" @onInput}
      {on "focus" @onFocus}
      {on "blur" @onBlur}      

      @type="search"
      @autocomplete="off"
      @autocorrect="off"
      @autocapitalize="off"
      @spellcheck=false
      @role="combobox"
      @value=@select.searchText
      @aria-controls=@listboxId
      @placeholder=@searchPlaceholder
    ]

also fixed image

so that works now

    %Uib::Wizard as |wizard| [
      @onClose={action (queue [
        (action this.closeWizard)
        (transition-to 'home')
      ])}
      @onGoBack={action (queue [
        (action this.onGoBack)
      ])}
    ]
      = wizard.navigation

Added angel bracket separator for %comp>subcomp @value=foo definitions converted to <comp.subcomp @value=foo> (angel component definition) for issue 337 and 332

      %MyComponent @value=foo as |comp|
        % comp>subcomp @value=foo

will be parsed to

<MyComponent @value={{foo}} as |comp|><comp.subcomp @value={{foo}}/></MyComponent>

Support Template Literal 314

|Body ${title}
p Woot #{yeah} ${hohoho}

Added support for https://github.com/machty/emblem.js/issues/326 but removed workaround code with no dedenting close bracket in multi-line declarations because it leads to syntax glitches

now any non dedent bracket is invalid like this

      %MyComponent [
        @foo=bar
        @baz=\'food\' ]

or

      my-component [
        value=child.[0] ]
        | Thing

or something else

close bracket should be on the same line as open

      %MyComponent [
        @foo=bar
        @baz=\'food\'
      ]

      my-component [
        value=child.[0]
      ]
        | Thing

Added support for https://github.com/machty/emblem.js/issues/339

%my-component: %my-other-component: p Hello

'%my-component @value=fooValue data-hint="My special component" ...attributes: % my-other-component @onClose={ action "modalClosed" }: p Hello

      % my-component [
        value=this.someProp.[0]
        ...attributes
      ]: %MyOtherComponent value=this.someProp2 ...attributes: p Hello

= my-component: = my-other-component: p Hello

= my-component value=this.someProp.[0]: = my-other-component value=this.someProp2: p Hello

      = my-component [
        value=this.someProp.[0]
      ]: = my-other-component value=this.someProp2: p Hello

Added test case for https://github.com/machty/emblem.js/issues/333 but actually that works

      %Article
        %:title
          h1 = this.title
        %:body
          .byline = byline this.author
          .body = this.body

Added ability for defining inline shorthands in html-tags and glimmer components. also added ability to define block params in the start of blocked component instead of end but in the end definition also supported

#hello .woot
.woot #hello
span.woot#id.loot #hello.boot
%my-comp .woot.loot#hello @value=foo

      %MyComponent as |comp| [
        @foo=bar
        @baz=\'food\'
      ]
        = comp.name

      %MyComponent [
        @foo=bar
        @baz=\'food\'
      ] as |comp|
        = comp.name

Added destructuring to block params definition: inside glimmer components and mustache definitions

= my-component value=foo as |comp1 {subcomp subcomp2}=comp comp2|
  = subcomp value=foo: = subcomp2

= my-component value=foo as |comp1 [subcomp subcomp2]=comp comp2|
  = subcomp value=foo: = subcomp2

%MyComponent @value=foo as |comp1 {subcomp subcomp2}=comp comp2|
  % subcomp @value=foo: = subcomp2

%MyComponent @value=foo as |comp1 [subcomp subcomp2]=comp comp2|
  % subcomp @value=foo: = subcomp2

Added support for non-block components definitions with %my-comp/ @value=foo. Also glimmer component will be non-blocked if it's not contain nested nodes. resolved https://github.com/machty/emblem.js/issues/338

Added syntax error suggester

ERROR: line 66 (column 8): ceholder')}\uEFFF\n@value=#this.formData.orgNi
ERROR: ----------------------------------------------^
ERROR: Expected "'", "\"", "{", _17PathIdent, _27Valid numbers, or _34valid attribute value but "#" found.
Build Error (TemplateCompiler) in wallet/components/pages/business-account/template.emblem

Expected "'", "\"", "{", _17PathIdent, _27Valid numbers, or _34valid attribute value but "#" found.

So that It's not back compatible patch

ztjohns commented 3 years ago

@evgenibir This is really great. Shame it hasn't been merged into this main project.

Quick question, having issues using your forked project because ember-cli-emblem installs this older version in its own dependencies during npm install. How did you go about resolving this on your own project in the interim? thanks!

ztjohns commented 3 years ago

I did notice one compilation difference, but its minor. In the following example on 0.12.1 this would compile plain text, but in 0.13.4 it breaks and says that you cannot have the '[ ]' square brackets. This occurred only once in our code and was easily changed.

| some text [here]