Mustache.js: Dukungan Modul ES

Dibuat pada 29 Mei 2019  ·  18Komentar  ·  Sumber: janl/mustache.js

Halo!

Saya bertanya-tanya apakah ada rencana untuk mendukung versi modul ES dari Moustache.js ? Jika demikian saya dapat berkontribusi untuk itu.

Mengapa?
Saya sedang mengerjakan proyek Deno , dan ada diskusi tentang templating (Deno hanya mendukung modul ES). Masalahnya adalah tidak ada perender template saat ini. Satu ide adalah mem- port Deno , jadi port berarti aliran kode berbeda yang perlu dirawat. Memilikinya langsung di kumis akan bermanfaat bagi kedua proyek saya pikir. Tetapi dalam kasus kumis itu berarti memiliki mustache.mjs ditambahkan ke repo, edit : atau ubah mustache.js agar modul ES kompatibel.

pikiran Anda?

ref: https://github.com/denoland/deno_std/issues/391

Komentar yang paling membantu

Pembaruan status; seperti yang saya sebutkan di PR yang Anda buka terhadap cabang esm-ify saya, saya sekarang mendapatkan beberapa tes yang memastikan paket ini berfungsi sebagaimana dimaksud untuk sistem modul berbeda yang telah kami dukung selama bertahun-tahun di #724.

Saya akan membiarkan minuman itu selama beberapa hari karena saya baru saja mendorong beberapa perbaikan, kalau-kalau ada yang keberatan atau lebih banyak penyesuaian dalam pikiran.

Dengan pengujian tersebut, saya merasa nyaman untuk melanjutkan transisi proyek ini ke kode sumber yang ditulis sebagai modul ES dan membangun langkah untuk menghasilkan apa yang kita dapatkan di mustache.js hari ini -- itu tentu saja akan selesai dalam PR yang akan datang.

Semua 18 komentar

Hai @zekth!

Rencana menarik yang Anda miliki dengan deno ke depan. Saya sangat positif untuk membuat modul ES proyek ini kompatibel, dan sepenuhnya setuju dengan pemikiran Anda tentang menghindari port.

Anda punya pemikiran konkret apa yang diperlukan untuk membuat ini terjadi?

Ini adalah port (sangat jelek) yang saya lakukan pagi ini (dalam TypeScript) https://github.com/zekth/deno_mustache/blob/master/mod.ts

saya telah porting beberapa tes hanya untuk awal.
Satu-satunya kekhawatiran yang saya miliki adalah semua lingkungan berbeda yang Anda dukung dengan kumis, memiliki file js utama yang kompatibel dengan modul ES lebih baik daripada mjs saya pikir tetapi saya tidak ingin merusak apa pun :)

Terima kasih banyak untuk referensinya! 👍

Karena saya tidak memiliki pengalaman sama sekali dengan deno, saya akan mengajukan beberapa pertanyaan sepele untuk memicu beberapa diskusi:

  1. Persyaratan apa yang harus dimiliki deno agar ini berfungsi? Apakah itu harus berupa file .mjs atau apakah itu peduli dengan type="module" dari package.json ?
  2. Adakah persyaratan penamaan file?
  3. Apakah TypeScript penting di sini entah bagaimana?

..dan seterusnya, petunjuk-petunjuk apa pun akan sangat dihargai. Saat ini saya memiliki terlalu sedikit pengetahuan tentang deno untuk berpikir kreatif tentang cara-cara yang masuk akal untuk mengatasi hal ini.

  1. Tidak ada persyaratan khusus karena hanya membutuhkan perpustakaan untuk menjadi modul ES. Contoh lodash bekerja tanpa porting. Pemuatan modul dilakukan melalui pengambilan HTTP, tanpa paket json atau apa pun.
  2. Tidak ada konvensi penamaan
  3. Anda dapat menggunakan TypeScript dari JavaScript, Deno menangani keduanya.

Misalnya menggunakan kumis di deno akan terlihat seperti:

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

Jika Anda ingin info lebih lanjut, Anda dapat memeriksa pembicaraan dari Ryan ini: https://www.youtube.com/watch?v=z6JRlx5NC9E

Dingin!

Jadi, inilah beberapa ocehan untuk berbagi beberapa pemikiran & konteks. Pemahaman saya tentang modul ES adalah bahwa mereka dimaksudkan untuk dapat diuraikan secara sintaksis dalam hal export ed. Itu sangat kontras dengan pendahulunya seperti CommonJS, AMD dll yang jauh lebih dinamis di alam.

Dengan mengingat hal itu, saya juga mengasumsikan IIFE yang mengelilingi tubuh mustache.js hari ini, yang dimaksudkan untuk mendeteksi fitur sistem modul tempat kode saat ini berjalan, tidak akan berfungsi di tanah modul ES -- tolong perbaiki saya jika saya' saya salah!

Itu berarti harus ada file .js | .mjs | .ts yang memiliki export ... sederhana dan sederhana seperti yang Anda miliki di port Anda: zekth/deno_mustache/mod.ts#L689 .

Kegembiraan dimulai ketika kami juga ingin mempertahankan perilaku lama, untuk tetap kompatibel dengan proyek yang menggunakan sistem modul lain atau bahkan bukan sistem modul sama sekali, maka perlunya pembungkus IIFE yang disebutkan :thinking: Dan sebagai pengingat, itu berarti proyek berjalan di server dan browser.

Karena kita pasti tidak ingin menyinkronkan dua implementasi yang berbeda (modul ES + sisanya), ini mulai terasa seperti langkah pembangunan yang layak dipertimbangkan. Misalnya, jika kita menulis kode sumber dalam gaya modul ES, maka langkah pembuatan dapat mengubahnya menjadi modul non-ES seperti yang kita miliki saat ini. Atau sebaliknya jika itu tidak terlalu mengganggu.

Sebagai catatan terakhir, saya penggemar berat melakukan langkah sekecil mungkin. Saya umumnya positif terhadap TypeScript, tetapi apakah tidak apa-apa untuk saat ini jika kita tetap fokus pada modul ES dan melakukan putaran berbeda yang berfokus pada apakah akan mengonversi ke TypeScript/mengekspor typedefs atau tidak?

Adakah pemikiran atau koreksi lain yang terlintas dalam pikiran?

Anda benar sekali, langkah pertama adalah menambahkan tumpukan TypeScript dan menggunakan kompiler untuk menampilkan banyak file seperti commonjs / ES5 / ES6 dan seterusnya ( https://www.typescriptlang.org/docs/handbook/compiler-options .html ). Menggunakan TS compiler tidak memaksa kita untuk menggunakan TypeScript, kita juga bisa menggunakan kode ES6.

Oh itu saran yang bagus! Mencoba menggunakan kompiler TS sebagai alat build biasa dari ES -> sistem modul lain pada awalnya. Itu akan membuat konversi TS yang masuk akal nantinya jauh lebih sedikit berisiko.

Apakah Anda dapat mencoba pendekatan itu? Tidak harus menyelesaikan semuanya sekaligus, tetapi setidaknya blok bangunan pertama. Akan sangat berharga untuk memiliki sesuatu yang konkret untuk dilihat dan menjadi dasar diskusi di masa depan.

Sooo saya mencoba membuat transisi ke modul ES.

Bukti konsep saya akhirnya menggunakan rollup.js alih-alih kompiler TypeScript (atau babel) terutama karena versi UMD yang mereka hasilkan -- kami masih membutuhkannya untuk menjaga kompatibilitas dengan sistem modul yang lebih lama atau tanpa sistem modul sama sekali.

Adakah kemungkinan Anda bersedia mencobanya dengan deno untuk melihat apakah itu berfungsi seperti yang Anda harapkan? phillipj/mustache.js#esm-ify mustache.mjs

@phillipj akan melakukannya!

Beberapa kesalahan tetapi saya pikir itu adalah perbaikan kecil:

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.

kode:

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);

ingin saya mencoba membuat PR pada file .mjs ?

Terima kasih!

Sadarilah sekarang bahwa saya harus berbagi sedikit lebih banyak konteks tentang apa yang saya coba lakukan pada awalnya, maaf.

Seperti yang telah kita bahas sebelumnya, upaya awal saya dengan kompiler TypeScript juga menghasilkan beberapa kesalahan, agak mirip dengan yang Anda berikan sekarang. Namun demikian itu mengejutkan saya bahwa itu menghasilkan output dan itu sangat dekat dengan apa yang saya inginkan.

Yang tidak saya sukai adalah kode UMD yang membungkus output yang dikompilasi. Terutama dua hal:

  1. Itu tidak memiliki cadangan untuk mengekspos konten paket ke lingkup global (pikirkan window.Mustache ). Ini sangat penting bagi pengguna kami yang tidak memiliki sistem modul.
  2. Dalam proyek dengan CommonJS, konten paket ini diekspos sebagai module.exports.default daripada module.exports . Meskipun itu mungkin perilaku yang benar dan diharapkan ketika CommonJS require() s modul ES, itu akan merusak kompatibilitas ke belakang, yang saya harap hindari.

Karena tujuan utama saya adalah untuk pertama dan terutama mentransisikan kode sumber menjadi modul ES, tidak memperkenalkan TypeScript, saya memutuskan untuk mencoba kompiler/bundler yang berbeda untuk melihat apakah mereka melakukan hal yang berbeda untuk menghindari dua tantangan di atas.

Oleh karena itu alasan saya berakhir dengan rollup.js. Ini adalah keluaran UMD yang kami butuhkan dan tidak menyebabkan perubahan yang mengganggu pengguna paket ini.

Sooo untuk pertanyaan saya yang sebenarnya; apakah kita perlu peduli dengan TypeScript saat ini?

Pemahaman saya dari awal dalam diskusi ini adalah kita dapat mempertimbangkan untuk tidak sepenuhnya beralih ke TypeScript, karena itu akan membantu deno meskipun itu memang modul ES, tetapi saya mungkin sedikit salah memahaminya?

Saya pikir masalah utama adalah inisialisasi pertama kumis seperti di sini:
https://github.com/janl/mustache.js/blob/master/mustache.js#L14

dan juga ini: https://github.com/janl/mustache.js/blob/master/mustache.js#L536
dapat ditulis ulang sebagai new Context(view, null)

tidakkah menurutmu?

Saya pikir masalah utama adalah inisialisasi pertama kumis..

Kamu mungkin benar. Dalam versi .mjs saya mencoba memindahkannya ke kode sumber aktual setidaknya, alih-alih menjadi objek yang diteruskan dari pembungkus UMD:

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

Akan keren untuk melihat pendekatan Anda yang akan memperbaiki kesalahan TypeScript itu 👍

dapat ditulis ulang sebagai Konteks baru (tampilan, nol)

Hampir.. Bukankah new Context(view, undefined) sama dengan tidak memberikan argumen kedua sama sekali?

Ya benar tentang new Context

Saya akan mencoba sesuatu jadi :)

Ini PRnya: https://github.com/phillipj/mustache.js/pull/1
CI rusak tetapi saya tidak mengerti mengapa saya mendapat pesan linting itu

Luar biasa, terima kasih banyak! Cukup sibuk beberapa hari ke depan, saya akan melakukan yang terbaik untuk meninjau sebelum minggu berakhir.

Pembaruan status; seperti yang saya sebutkan di PR yang Anda buka terhadap cabang esm-ify saya, saya sekarang mendapatkan beberapa tes yang memastikan paket ini berfungsi sebagaimana dimaksud untuk sistem modul berbeda yang telah kami dukung selama bertahun-tahun di #724.

Saya akan membiarkan minuman itu selama beberapa hari karena saya baru saja mendorong beberapa perbaikan, kalau-kalau ada yang keberatan atau lebih banyak penyesuaian dalam pikiran.

Dengan pengujian tersebut, saya merasa nyaman untuk melanjutkan transisi proyek ini ke kode sumber yang ditulis sebagai modul ES dan membangun langkah untuk menghasilkan apa yang kita dapatkan di mustache.js hari ini -- itu tentu saja akan selesai dalam PR yang akan datang.

728 telah dibuka untuk pengawasan publik.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

chlab picture chlab  ·  11Komentar

amper5and picture amper5and  ·  5Komentar

funston picture funston  ·  7Komentar

MatthijsZw picture MatthijsZw  ·  18Komentar

barbalex picture barbalex  ·  5Komentar