TypeScript TestEnvironment.compile方法代碼示例

function compile(template: string) {
  return env.compile(template);
}

function renderContent() {
  let data = JSON.parse($data.value);

  let env = new TestEnvironment();

  env.registerEmberishGlimmerComponent("h-card", null, $layout.value);

  let app = env.compile($template.value);

  function compileLayout(component) {
    let definition = env.getComponentDefinition([component]);
    let compiled = layoutFor(definition, env);
    let children = definition['compileLayout'](env).children;

    // Fake a Block
    return { compiled, children, compile() {} };
  }

  function compileInner(block) {
    block.compile(env);
    block.children.forEach(compileInner);
  }

  function processOpcodes(block) {
    compileInner(block);

    return {
      opcodes: block.compiled.ops.toArray().map(op => op.toJSON()),
      children: block.children.map(processOpcodes)
    };
  }

  function processUpdatingOpcodes(list) {
    return res['updating'].toArray().map(op => op.toJSON());
  }

  let div = document.createElement('div');

  env.begin();
  let self = new UpdatableReference(data);
  let res = app.render(self, env, { appendTo: div, dynamicScope: new TestDynamicScope(null) });
  env.commit();

  ui.rendered = true;

  ui.template.source = $template.value;
  ui.template.wireFormat = JSON.parse(compileSpec($template.value, {}));
  ui.template.opcodes = processOpcodes(app.raw);

  ui.layout.source = $layout.value;
  ui.layout.wireFormat = JSON.parse(compileSpec($layout.value, {}));
  ui.layout.opcodes = processOpcodes(compileLayout("h-card"));

  ui.updatingOpcodes = processUpdatingOpcodes(res['updating']);

  ui.html = div.innerHTML;

  window['$UI'] = ui;
  window['$DIV'] = div;

  _updateContent = () => {
    self.update(JSON.parse($data.value));
    res.rerender();
    ui.updatingOpcodes = processUpdatingOpcodes(res['updating']);
    ui.html = div.innerHTML;
    rerenderUI();
  };

  rerenderUI();
}

//.........這裏部分代碼省略.........
        <li><span class="pre">{{json local}}</span></li>
      {{/each}}
    </ol>
    <hr />
  {{/if}}
  {{#if @spec.named}}
    <h3>Named</h3>
    <ol>
      {{#each @spec.named key="@index" as |name|}}
        <li><span class="pre">{{json name}}</span></li>
      {{/each}}
    </ol>
    <hr />
  {{/if}}
  {{#if @spec.yields}}
    <h3>Yields</h3>
    <ol>
      {{#each @spec.yields key="@index" as |yield|}}
        <li><span class="pre">{{json yield}}</span></li>
      {{/each}}
    </ol>
    <hr />
  {{/if}}
  {{#if @spec.blocks}}
    <h3>Blocks</h3>
    <ol>
      {{#each @spec.blocks key="@index" as |block|}}
        <li>
          <h3>Block</h3>
          {{wire-format-inspector spec=block}}
        </li>
      {{/each}}
    </ol>
  {{/if}}
</div>`);

  env.registerHelper("pp-opcode", ([opcode]) => {
    let output = opcode.type.toUpperCase();

    if (opcode.args || opcode.details) {
      output += "(";

      if (opcode.args && opcode.args.length) {
        output += opcode.args.join(", ");
      }

      if (opcode.details) {
        let keys = Object.keys(opcode.details);

        if (keys.length) {
          if (opcode.args && opcode.args.length) {
            output += ", ";
          }

          output += keys.map(key => `${key}=${opcode.details[key]}`).join(", ");;
        }
      }

      output += ")";
    }

    return output;
  });

  env.registerEmberishGlimmerComponent("opcode-inspector", null,
`<li>
  <span class="pre">{{pp-opcode @opcode}}</span>
  {{#if @opcode.children}}
    <ol>
      {{#each @opcode.children key="guid" as |opcode|}}
        {{opcode-inspector opcode=opcode}}
      {{/each}}
    </ol>
  {{/if}}
</li>`);

  env.registerEmberishGlimmerComponent("block-inspector", null,
`<div>
  <h3>Opcodes</h3>
  <ol>
    {{#each @block.opcodes key="guid" as |opcode|}}
      <opcode-inspector opcode={{opcode}} />
    {{/each}}
  </ol>
  <hr />
  {{#each @block.children key="@index" as |inner|}}
    <div class="indent">{{block-inspector block=inner}}</div>
  {{/each}}
</div>`);

  env.begin();
  let self = new UpdatableReference(ui);
  let res = env.compile(UI).render(self, env, { appendTo: document.body, dynamicScope: new TestDynamicScope(null) });
  env.commit();

  rerenderUI = () => {
    self.update(ui);
    res.rerender();
  };
}

 assert.throws(() => {
   env.compile('<div><p>{{./value}}</p></div>');
 }, new Error("Using \"./\" is not supported in Glimmer and unnecessary: \"./value\" on line 1."), "should throw error");