Mustache.js: Поддержка модуля ES

Созданный на 29 мая 2019  ·  18Комментарии  ·  Источник: janl/mustache.js

Привет!

Мне было интересно, есть ли план поддержки версии ES-модуля Mustache.js ? Если да, то я могу внести свой вклад.

Почему?
Я работаю над проектом Deno , и идет обсуждение шаблонов (Deno поддерживает только модули ES). Проблема в том, что на данный момент нет средства визуализации шаблонов. Одна из идей заключалась в том, чтобы перенести mustache на Deno , поэтому порт означает другой поток кода, который требует обслуживания. Я думаю, что если он будет прямо в усах, это будет преимуществом для обоих проектов. Но в случае усов это означает добавление mustache.mjs в репо, отредактируйте : или измените mustache.js, чтобы сделать его совместимым с ES-модулем.

Твои мысли?

ссылка: https://github.com/denoland/deno_std/issues/391

Самый полезный комментарий

Обновление статуса; как я упоминал в PR, который вы открыли для моей ветки esm-ify , теперь у меня есть несколько тестов, которые гарантируют, что этот пакет работает так, как задумано, для различных модульных систем, которые мы поддерживали в течение многих лет в # 724.

Я позволю этому настояться пару дней, поскольку я только что внес несколько улучшений, на всякий случай, если у кого-то есть какие-либо возражения или дополнительные настройки.

Имея эти тесты, я чувствую себя комфортно, продвигаясь вперед, переходя в этом проекте к тому, чтобы исходный код был написан как модуль ES, и этап сборки, чтобы получить то, что у нас есть в mustache.js сегодня - это, конечно, будет сделано в предстоящем PR.

Все 18 Комментарий

Привет @zekth!

У вас есть захватывающие планы на будущее. Я очень уверен, что сделаю этот проект совместимым с ES-модулем, и полностью согласен с вашими мыслями об отказе от порта.

У вас есть какие-то конкретные мысли, что необходимо для этого?

Вот (действительно уродливый) порт, который я сделал сегодня утром (в машинописном тексте) https://github.com/zekth/deno_mustache/blob/master/mod.ts

Я портировал тест только для начала.
Единственное, что меня беспокоит, это разные среды, которые вы поддерживаете с помощью усов, наличие совместимого с основным js-файлом ES-модуля лучше, чем другой mjs я думаю, но я не хочу ничего ломать :)

Большое спасибо за ссылку! 👍

Поскольку у меня нулевой опыт работы с den, я отвечу на несколько тривиальных вопросов, чтобы вызвать некоторые обсуждения:

  1. Какие требования к обозначению необходимы для работы? Это должен быть файл .mjs или его заботит type="module" из package.json ?
  2. Какие-либо требования к именованию файлов?
  3. Имеет ли здесь какое-то значение TypeScript?

..и так далее, любые подсказки для чайников были бы очень признательны. На данный момент у меня слишком мало знаний о знаменах, чтобы творчески думать о возможных способах решения этой проблемы.

  1. Особых требований нет, поскольку библиотека должна быть только модулем ES. Пример lodash работает без портирования. Загрузка модуля осуществляется через HTTP-выборку, без пакета json или чего-то еще.
  2. Нет соглашения об именах
  3. Вы можете использовать TypeScript или JavaScript, Deno обрабатывает оба.

Например, использование усов в значении будет выглядеть так:

import * as mustache from 'https://raw.githubusercontent.com/janl/mustache.js/master/mustache.js'
mustache.render(......

Если вам нужна дополнительная информация, вы можете проверить это выступление Райана: https://www.youtube.com/watch?v=z6JRlx5NC9E

Прохладный!

Итак, вот несколько разговоров, чтобы поделиться некоторыми мыслями и контекстом. Насколько я понимаю, модули ES заключаются в том, что они предназначены для синтаксического анализа с точки зрения того, что export ed. Это резко контрастирует с его предшественниками, такими как CommonJS, AMD и т. Д., Которые по своей природе намного более динамичны.

Имея это в виду, я также предполагаю, что IIFE, окружающий тело mustache.js сегодня, предназначенный для определения модульной системы, в которой в настоящее время выполняется код, не будет работать в стране модулей ES - пожалуйста, поправьте меня, если я ' я ошибаюсь!

Это означает, что должен быть файл .js | .mjs | .ts с простым и простым export ... как у вас в порту: zekth / identify_mustache / mod.ts # L689 .

Самое интересное начинается тогда, когда мы также хотим сохранить старое поведение, чтобы оставаться совместимыми с проектами, использующими другие модульные системы или даже не модульную систему вообще, отсюда и потребность в упомянутой оболочке IIFE: Think: И, как напоминание, это означает, что проекты работает на серверах и в браузерах.

Поскольку мы, конечно же, не хотим синхронизировать две разные реализации (модули ES + остальные), начинает казаться, что стоит подумать об этапе сборки. Например, если мы написали исходный код в стиле модуля ES, то на этапе сборки он мог бы преобразовать его в модуль, не относящийся к ES, как сегодня. Или наоборот, если это менее навязчиво.

И последнее замечание: я большой поклонник делать как можно меньше шагов. Я в целом положительно отношусь к TypeScript, но пока все в порядке, если мы сосредоточимся на модулях ES и проведем другой раунд, сфокусированный на том, нужно ли преобразовывать в TypeScript / экспортировать typedefs?

Какие-нибудь другие мысли или исправления, которые приходят на ум?

Вы совершенно правы, первым шагом было бы добавить стек TypeScript и использовать компилятор для вывода нескольких файлов, таких как commonjs / ES5 / ES6 и т. Д. (Https://www.typescriptlang.org/docs/handbook/compiler-options .html). Использование компилятора TS не заставляет нас использовать TypeScript, мы также можем использовать код ES6.

О, это отличное предложение! Пытаюсь сначала использовать компилятор TS как обычный инструмент сборки из ES -> других модульных систем. Это сделает правдоподобное преобразование TS в дальнейшем намного менее рискованным.

Можете ли вы дать этому подходу шанс? Не обязательно решать все за один присест, но по крайней мере первые строительные блоки. Было бы действительно полезно иметь что-то конкретное, на что можно было бы взглянуть и на котором основывались бы будущие обсуждения.

Так вот, я попытался перейти на модуль ES.

Мое доказательство концепции закончилось использованием rollup.js вместо компилятора TypeScript (или babel) в первую очередь из-за генерируемой им версии UMD - нам все еще нужно, чтобы поддерживать совместимость со старыми модульными системами или вообще не использовать модульную систему.

Есть ли шанс, что вы захотите протестировать его с помощью значка, чтобы убедиться, что он работает так, как вы ожидаете? phillipj / mustache.js # esm-ify mustache.mjs

@phillipj подойдет!

Некоторые ошибки, но я думаю, что это мелкие исправления:

error TS2339: Property 'render' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► file:///Users/vlegoff/projects/genesys/github/telemetry/t/mustache.ts:10:23

10 var output = mustache.render('{{title}} spends {{calc}}', view);
                         ~~~~~~

error TS2554: Expected 2 arguments, but got 1.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:525:52

525   var context = (view instanceof Context) ? view : new Context(view);
                                                       ~~~~~~~~~~~~~~~~~

  An argument for 'parentContext' was not provided.

    ► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:377:25

    377 function Context (view, parentContext) {
                                ~~~~~~~~~~~~~


error TS2339: Property 'escape' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:640:21

640     return mustache.escape(value);
                        ~~~~~~

error TS2339: Property 'clearCache' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:659:10

659 mustache.clearCache = function clearCache () {
             ~~~~~~~~~~

error TS2339: Property 'parse' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:668:10

668 mustache.parse = function parse (template, tags) {
             ~~~~~

error TS2339: Property 'render' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:678:10

678 mustache.render = function render (template, view, partials, tags) {
             ~~~~~~

error TS2339: Property 'to_html' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:690:10

690 mustache.to_html = function to_html (template, view, partials, send) {
             ~~~~~~~

error TS2339: Property 'render' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:693:25

693   var result = mustache.render(template, view, partials);
                            ~~~~~~

error TS2339: Property 'escape' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:704:10

704 mustache.escape = escapeHtml;
             ~~~~~~

error TS2339: Property 'Scanner' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:707:10

707 mustache.Scanner = Scanner;
             ~~~~~~~

error TS2339: Property 'Context' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:708:10

708 mustache.Context = Context;
             ~~~~~~~

error TS2339: Property 'Writer' does not exist on type '{ name: string; version: string; tags: string[]; }'.

► https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs:709:10

709 mustache.Writer = Writer;
             ~~~~~~


Found 12 errors.

код:

import mustache from 'https://raw.githubusercontent.com/phillipj/mustache.js/esm-ify/mustache.mjs';

var view = {
  title: 'Joe',
  calc: function() {
    return 2 + 4;
  },
};

var output = mustache.render('{{title}} spends {{calc}}', view);

console.log(output);

хотите, чтобы я попытался устроить пиар вашего файла .mjs ?

Спасибо!

Поймите, теперь я должен рассказать немного больше о том, что я пытался сделать вначале, извините.

Как мы обсуждали ранее, моя первоначальная попытка с компилятором TypeScript также привела к довольно большому количеству ошибок, отчасти похожих на те, которые вы указали сейчас. Тем не менее меня удивило, что результат был очень близок к тому, что я хотел.

Что мне не понравилось, так это код UMD, который он обернул вокруг скомпилированного вывода. В основном две вещи:

  1. У него нет альтернативы раскрытию содержимого пакета в глобальной области (подумайте, window.Mustache ). Это жизненно важно для наших пользователей, у которых нет модульной системы.
  2. В проектах с CommonJS содержимое этого пакета отображается как module.exports.default а не как module.exports . Хотя это может быть правильным и ожидаемым поведением, когда CommonJS require() s является модулем ES, это нарушит обратную совместимость, чего я надеялся избежать.

Поскольку моей основной целью было, прежде всего, преобразовать исходный код в модуль ES, а не вводить TypeScript, я решил попробовать разные компиляторы / сборщики, чтобы увидеть, делают ли они что-то по-другому, чтобы избежать двух проблем, описанных выше.

По этой причине я остановился на rollup.js. Вывод UMD - это то, что нам нужно, и он не вызывает каких-либо критических изменений для пользователей этого пакета.

Ооочень на мой актуальный вопрос; нужно ли нам сейчас заботиться о TypeScript?

Насколько я понял ранее в этом обсуждении, мы могли бы еще не полностью рассмотреть переход на TypeScript, поскольку это все равно поможет deno если это действительно модуль ES, но я мог бы неправильно это понять?

Думаю, основная проблема - это первая инициализация усов, как здесь:
https://github.com/janl/mustache.js/blob/master/mustache.js#L14

а также это: https://github.com/janl/mustache.js/blob/master/mustache.js#L536
можно переписать как new Context(view, null)

ты не думаешь?

Думаю, основная проблема - это первая инициализация усов ..

Возможно ты прав. В версии .mjs я попытался переместить это, по крайней мере, в фактический исходный код, вместо того, чтобы быть объектом, переданным из оболочки UMD:

var mustache = {
  name: 'mustache.js',
  version: version,
  tags: [ '{{', '}}' ]
}

Было бы здорово увидеть ваш подход, который исправит эти ошибки TypeScript 👍

можно переписать как новый контекст (view, null)

Почти ... Разве new Context(view, undefined) эквивалентно вообще отсутствию передачи второго аргумента?

Да, правильно о new Context

Я попробую что-нибудь так :)

Вот PR: https://github.com/phillipj/mustache.js/pull/1
CI не работает, но я не понимаю, почему я получил эти сообщения линтинга

Отлично, спасибо большое! Следующие несколько дней довольно заняты, я постараюсь сделать обзор до выходных.

Обновление статуса; как я упоминал в PR, который вы открыли для моей ветки esm-ify , теперь у меня есть несколько тестов, которые гарантируют, что этот пакет работает так, как задумано, для различных модульных систем, которые мы поддерживали в течение многих лет в # 724.

Я позволю этому настояться пару дней, поскольку я только что внес несколько улучшений, на всякий случай, если у кого-то есть какие-либо возражения или дополнительные настройки.

Имея эти тесты, я чувствую себя комфортно, продвигаясь вперед, переходя в этом проекте к тому, чтобы исходный код был написан как модуль ES, и этап сборки, чтобы получить то, что у нас есть в mustache.js сегодня - это, конечно, будет сделано в предстоящем PR.

728 открыта для всеобщего обозрения.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

amper5and picture amper5and  ·  5Комментарии

connor11528 picture connor11528  ·  3Комментарии

funston picture funston  ·  7Комментарии

Immortalin picture Immortalin  ·  12Комментарии

rlightner picture rlightner  ·  7Комментарии