Duplikat ke #1870 dan #3423. Mari kita lanjutkan diskusi di sana

Build Pemula baru untuk stensil saat ini dan SB 5 akan dibuat

@Edd-Strickland ingin mengerjakan versi dukungan stencl

Saya telah memutakhirkan starter polimer dengan stensil ke versi terbaru SB perlu bantuan dalam menghilangkan polimer dan menambahkan kompiler stensil sekarang

Hai,

@Edd-Strickland hanya untuk informasi, saya telah menerapkan Stensil di dalam Buku Cerita seperti yang Anda lakukan di starter Anda, dalam proyek ini: https://github.com/vogloblinsky/nutrition-web-components

Saya telah menggunakan starter HTML dari Storybook.

Untuk saat ini dengan Storybook & Stensil, saya hanya perlu:

• tambahkan tajuk khusus yang menunjuk ke setiap file JavaScript root yang dihasilkan oleh Stensil
• tambahkan file statis yang dihasilkan oleh Stensil di Buku Cerita

Masalah utama yang saya pikir adalah penggunaan Webpack oleh Storybook untuk menangani file JavaScript yang diimpor di dalam sebuah cerita. Alur kerja yang ideal adalah hanya mengimpor file JS dari Komponen Web.

Ya ini adalah apa yang telah dilakukan sebelumnya tetapi dengan versi polimer namun apa artinya ini adalah bahwa dengan mengimpor sebagai implementasi W/C statis biasa adalah Anda perlu memperbarui setiap kali ke dalam cerita Anda yang terasa membatasi.

Hai Semua, Saya telah membuat pembungkus yang dapat diinstal pada proyek jenis component stensil. Semoga membantu. https://github.com/nisheed2440/stencil-storybook-wrapper

terlihat sangat bagus saya akan menguji pada hari Senin. Kerja bagus :)

Apakah ini akan dijadikan bagian resmi dari Storybook? Saya sangat membutuhkan ini!

@otw Kami sedang mencoba, apakah Anda dapat membantu kami?

@ndelangen Saya akan dengan senang hati menguji berbagai hal dan memberikan umpan balik/laporan bug.

Apakah ini berfungsi dengan LitElement (dan komponen web secara umum) atau hanya Stensil?

@nisheed2440 pembungkus Anda tampaknya menjanjikan, saya akan segera menguji ini! Tetapi akan sangat bagus jika integrasi "asli" yang didokumentasikan oleh Buku Cerita

@nisheed2440 Saya sangat sibuk (maaf semuanya) tetapi memiliki jendela yang sangat kecil hari ini untuk menguji versi yang sangat vanilla dari ini secara lokal dan itu sangat bagus. bekerja sangat baik.

akan meluangkan waktu untuk minggu depan ini mencoba memasukkannya ke dalam proyek yang ada untuk melihat bagaimana ini dapat bekerja untuk pengguna / proyek stensil yang ada.

Saya telah mengujinya pagi ini dan itu bekerja dengan cukup baik juga! GJ itu sangat mudah untuk setup. Saya telah menginstal dan menguji beberapa add-on:

import '@storybook/addon-backgrounds/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';

Semuanya berfungsi dengan baik, baru saja menemukan satu masalah dengan addon-knobs https://github.com/storybooks/storybook/issues/5017 Tapi saya pikir ada solusi dan ini harus segera diperbaiki.

Saya menghabiskan 2 minggu terakhir bermain dengan StencilJS dan Storybook dan melakukan streaming langsung di mana saya membahas solusi saya. Saya merasa ada cara yang jauh lebih baik, tetapi saya bisa mendapatkan HMR, dan sebagian besar plugin berfungsi dengan sedikit masalah. Akan senang jika ada umpan balik yang Anda miliki tentang cara meningkatkan atau mengimpor loader dari bundel stensil distribusi.

https://www.youtube.com/watch?v=XwHtPw3izLE

Dan inilah reponya! ^_^
https://github.com/MadnessLabs/enjin-components

@nisheed2440 Halo, saya menggunakan pendekatan yang sangat mirip dengan Anda dan semuanya berfungsi, harap berwarna. apakah Anda dapat membuat karya berwarna dengan stensil/buku cerita?
ketika saya menjalankan, ia menemukan semua cerita saya tetapi semua tangkapan layar kosong. stensilnya mungkin hilang saat mencoba merender tangkapan layar komponen di server kromatik

@nisheed2440 Terima kasih banyak atas upaya yang sangat hebat ini. Mudah-mudahan ini memberi tim di sini awal yang lebih baik ke arah yang benar. Stensil dan Buku Cerita ideal untuk satu sama lain.

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini akhir-akhir ini. Jika masih ada pertanyaan, komentar, atau bug, jangan ragu untuk melanjutkan diskusi. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Ada yang mau ngambil ini?

Tim saya menggunakan StencilJS + Storybook untuk pustaka komponen umum kami dan saya ingin berkontribusi. Mungkin beberapa dari kita bisa mengembalikan hal ini ke jalurnya...

Sepertinya ada banyak minat, misalnya https://twitter.com/dboskovic/status/1120336958008348672

Satu kemenangan mudah adalah menerbitkan paket @storybook/preset-stencil yang mengemas konfigurasi preset buku cerita . Saya masih perlu menyelesaikan dokumen untuk itu, tetapi saya menggunakannya untuk rilis Dokumen Buku Cerita yang akan datang dan itu mudah & bagaimana sebagian besar konfigurasi SB akan bekerja di masa depan.

Saya akan dengan senang hati membimbing siapa saja yang ingin mengambilnya.

Hei @shilman , memicu begitu banyak orang yang bersemangat untuk mengambil ini dan menerapkan Stensil dengan Buku Cerita. Utas itu memiliki beberapa hal baik yang saya temukan, tetapi ada banyak lagi bug kecil seperti harus mengembalikan string elemen untuk menggunakan kenop.

Implementasi yang jauh lebih baik akan mendukung kompiler Stencil dan memungkinkan penggunaan JSX seperti dengan komponen React, tetapi itu adalah MHO.

Selain itu, Stencil One akan segera dirilis dengan beberapa perubahan besar, jadi mungkin baik untuk memasang pengintip di Changelog ini untuk memastikan siapa pun yang mengerjakan ini mengetahui apa yang akan terjadi.

https://github.com/ionic-team/stencil/blob/core-refactor/BREAKING_CHANGES.md

Utas ini sangat membantu saya, terutama konfigurasi @ popcorn245. Secara pribadi saya menggunakan @stencil/state-tunnel , yang merusak konfigurasi itu. Untungnya saya bisa membuatnya bekerja dengan beberapa ~hacks~ tweak kecil dengan menjalankan:

npm i -D [email protected]

Dan menambahkan ini ke .storybook/webpack.config.js :

const { existsSync, readdirSync } = require('fs');
const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = ({ config }) => {
  // 1. Transpile <strong i="11">@stencil</strong> modules with Babel
  const babelLoader = config.module.rules.find(
    ({ use }) => use && use[0].loader === 'babel-loader'
  );
  babelLoader.exclude = [/node_modules\/(?!\@stencil).*/];
  if (babelLoader.use[0].options) {
    babelLoader.use[0].options.plugins = ['@babel/plugin-syntax-dynamic-import'];
  }

  // 2. Load JS & CSS from our components
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.js'));
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.css'));

  const components = resolve(__dirname, '..', 'dist', 'collection', 'components');
  readdirSync(components).map(file => {
    jsFilePath = resolve(components, file, `${file}.js`);
    try {
      if (existsSync(jsFilePath)) config.entry.push(jsFilePath);
    } catch (err) {
      console.error(err);
    }

    cssFilePath = resolve(components, file, `${file}.css`);
    try {
      if (existsSync(cssFilePath)) config.entry.push(cssFilePath);
    } catch (err) {
      console.error(err);
    }
  });

  // 3. Fix dynamic imports for Storybook
  // IMPORTANT: webpack must be at 4.28 due to a bug. See here: https://github.com/webpack/webpack/issues/8656
  config.plugins.push(
    new CopyPlugin([
      {
        from: resolve(__dirname, '..', 'dist'),
        to: resolve(__dirname, '..', 'node_modules', '<strong i="12">@storybook</strong>', 'core', 'dist', 'public'),
      },
    ])
  );

  return config;
};

Mulai bereksperimen dengan ini juga dan (seperti yang disebutkan di tempat lain) menggunakan concurrently tampaknya berfungsi dengan baik untuk saya (untuk saat ini). Saya membuat proyek starter cepat yang mencakup semua yang Anda butuhkan untuk memulai dan menjalankan dengan stensil dan buku cerita. Sudah menggunakan rilis stensil terbaru.

Lihat di sini: stensil-buku cerita-starter

@fvaldes33 Bagus! Membintanginya. Saya sebenarnya baru saja memperbarui ke Stencil One beta dan konfigurasi saya terlihat serupa — pada dasarnya saya dapat menggunakan pengaturan webpack stok sepenuhnya.

Satu-satunya perbedaan bagi saya adalah menggunakan stencil build --watch (prod, bukan dev) karena waktu pembuatannya sangat cepat dan lebih mudah untuk menggunakan versi prod di Stencil (terutama dengan gaya global dan impor lainnya).

@fvaldes33 bagaimana Anda bisa mereferensikan build/components.js di preview-head.html Anda seperti itu? Saya harus menyediakan path lengkap misalnya http://localhost :3333/build/components.js. Tapi saya ingin tidak harus melakukan itu.

(Saya tidak menggunakan starter Anda, tetapi saya menggunakan starter komponen stensil dengan instalasi buku cerita/html baru)

EDIT:
menyadari saya memulai buku cerita di port 6006 alih-alih di folder www. masalah terpecahkan!

Sepertinya banyak dari kita memiliki solusi serupa di luar sana (termasuk saya https://github.com/jagreehal/stencil-boilerplate), tetapi saya sangat ingin pembaruan panas/langsung ketika saya mengedit komponen Stencil. Saat ini saya harus me-refresh browser secara manual untuk memuat ulang Storybook.

Apakah ada daftar peluru persyaratan untuk menyelesaikan ini? Saya akan dengan senang hati mengajukannya jika saya tahu apa yang perlu dibangun.

Apa keadaan saat ini? Bisakah kita berkontribusi? Saya akan senang melihat ini!

Saya menyarankan untuk menyumbangkan preset di atas.

• Preset didokumentasikan di sini: https://storybook.js.org/docs/presets/introduction/
• Ada repo untuk preset komunitas di sini: https://github.com/storybookjs/presets

Jika seseorang ingin menyusun preset berdasarkan pola di atas, saya akan dengan senang hati membantu di sisi Storybook. Saya tidak akrab dengan sisi Stensil.

Saya baru saja memposting proyek saya di luar sana untuk siapa saja yang menginginkannya. Berikut adalah fitur-fiturnya:

• pembuatan cerita secara otomatis
  
  
  
  • pembuatan kenop otomatis untuk semua @Props pada komponen Anda
  
  
  • kemampuan untuk menyesuaikan tombol mana yang digunakan untuk setiap prop (meskipun kode melakukan pekerjaan yang baik untuk menebak string, angka, boolean, objek, tanggal, dan warna).
  
  
  • kemampuan untuk menentukan beberapa status yang dirender pada satu halaman, masing-masing dengan judul, deskripsi, dan cuplikan kode yang dapat disalin (semacam implementasi bab yang ringan)
  
  
  • kemampuan untuk menentukan catatan untuk setiap komponen (biasanya Anda ingin readme yang dihasilkan)
  
  
• langsung membangun kembali/memuat ulang komponen stensil (masih sedikit miring - terkadang Anda harus me-refresh browser)
• dilengkapi dengan add-on viewport

Beri tahu saya pendapat Anda: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx Ini tampak hebat. Tweet tentang ini dan mention @storybookjs dan saya akan RT dari akun buku cerita. Dan jika Anda ingin menulis posting tentang itu, saya akan senang bekerja sama dengan Anda untuk mempublikasikannya. Saya pikir ada permintaan yang cukup besar di sini.

Pekerjaan luar biasa @DesignByOnyx ! Tampaknya ini sangat cocok untuk menjadi preset :tada:

Oke, saya sudah tweet (saya tidak banyak twitter). Lagi pula saya tidak punya blog :/, tapi saya senang membuat sesuatu jika ada yang mau mempublikasikannya.

Saat proyek berjalan, saya menggabungkannya dengan tergesa-gesa dan tidak membuatnya mudah untuk dikustomisasi. Beberapa kode di sana sangat rapuh karena saya harus memuat dan menggabungkan banyak file untuk membuat setiap komponen individual. Saya berharap untuk beberapa umpan balik sebelum saya menghabiskan waktu untuk membuat ini lebih dapat dikonsumsi.

Saya ingin tahu seperti apa bentuk presetnya. Hal terbesar yang akan menyenangkan adalah preset JSX yang tidak bereaksi. Ini akan memungkinkan rendering dan pembuatan template yang sedikit lebih mudah di atas variasi buku cerita-html, dan itu tidak ada hubungannya dengan stensil. Beberapa add-on juga perlu diperbarui agar ini dapat digunakan, dan saya tidak yakin saya yang terbaik untuk mengoordinasikan upaya itu. Apa pun itu, beri tahu saya apa yang bisa saya lakukan untuk membantu.

@DesignByOnyx Adakah kemungkinan Anda dapat menggunakan Discord kami? https://discordapp.com/invite/UUt2PJb

Saya ingin mengobrol lebih banyak tentang mendapatkan pekerjaan ini di luar sana di blog Buku Cerita serta mempromosikan di komunitas stensil.

Saya telah bermain dengan @storybook/html untuk Stensil dan pengalamannya cukup "berfungsi". Anda pada dasarnya melakukan hal berikut:

1. Gunakan concurrently untuk memulai server Buku Cerita dan stencil build --watch "secara paralel"
2. Mulai storybook dengan flag -s dist , sehingga Stencil Anda dist disajikan sebagai file statis.

3. Konfigurasikan .storybook/preview-head.html untuk menyertakan tag skrip seperti:

   <script type="module" src="/$PACKAGE_NAME/$PACKAGE_NAME.esm.js"></script>
   <script nomodule="" src="/$PACKAGE_NAME/$PACKAGE_NAME.js"></script>
   

Dan... itu dia! Dukungan html siap pakai berfungsi untuk semua kebutuhan komponen web Anda.

Yang ingin saya lihat adalah sesuatu seperti @storybook/stencil yang memiliki pengalaman (dan kode) yang sama dengan paket html di sisi penulisan cerita, tetapi

1. Abstrak menjalankan proses pembuatan Stensil sebagai bagian dari Buku Cerita, sehingga konfigurasi concurrently tidak diperlukan
2. Tambahkan tag script untuk Anda
3. Menghubungkan penyegaran otomatis saat komponen Stensil Anda dibuat ulang

Apakah ada minat pada hal seperti itu? Saya sedang dalam proses menjual perusahaan saya di Stencil dan Storybook, dan dengan asumsi bahwa mendapatkan daya tarik, saya akan memiliki "waktu kerja" untuk membuat cerita itu (permisi permainan kata) benar-benar bagus di sekitar Storybook + Stencil bermain bersama.

Pekerjaan yang telah dilakukan @DesignByOnyx benar-benar hebat, tetapi Anda harus _memulai_ komponen Stencil Anda dengan kit itu dan mengabaikan dokumentasi "normal" untuk Stencil. Jika Storybook dapat menyediakan paket yang dapat dilapiskan di atas starter kit Stencil "normal", Anda dapat dengan mudah menambahkan konfigurasi Storybook ke kumpulan komponen Stencil yang ada.

Terima kasih atas ringkasan yang bagus @alexlafroscia. Saya pikir proposal Anda sangat masuk akal. Apakah HMR tidak masuk secara otomatis ketika Stensil dibangun kembali? Jika demikian, ada ide mengapa tidak?

@igor-dv Apakah mungkin untuk menambahkan ke preview-head.html dalam preset?

@Hypnosphi Mungkin ini adalah contoh yang menarik untuk upaya multi-framework Anda. Dalam hal ini tidak diperlukan dekorator (tampaknya) tetapi seluruh kompiler diperlukan.

@alexlafroscia seperti apa contoh cerita dalam kasus Anda?

Di perusahaan tempat saya bekerja, kami telah bermain-main dengan paket Storybook HTML dan StencilJS untuk sementara waktu. Saya akan dengan senang hati berkontribusi!

@alexlafroscia Ide yang sangat bagus, memang akan menyenangkan memiliki dukungan lengkap untuk kompiler ini. Berikut beberapa ide lainnya:

• Gunakan kemampuan StencilJS JSX (berdasarkan Preact saat ini) untuk menulis cerita dengan cara yang lebih mudah dikelola. Menggunakan JS lama biasa atau bahkan literal templat mungkin rumit...
• Memiliki addon Smart Knobs untuk Komponen Web. @DesignByOnyx memberikan dasar yang bagus untuk ini.

Artikel ini membahas peta jalan yang sedang berjalan di StencilJS: Peta Jalan Stensil Musim Gugur 2019 . Terutama:

API Kompilator Publik

Area lain yang juga kami fokuskan adalah memastikan kompiler dapat bekerja di dalam browser dan digunakan oleh alat lain. Kami telah bekerja dengan beberapa tim hebat seperti Stackblitz, CodeSandbox, dan WebComponents.dev. Pada level terendah, kompiler sudah bekerja tanpa berjalan di atas lingkungan NodeJS, jadi secara teknis ini bukan refactor utama, tetapi lebih dari itu hanya mengekspos API yang benar.

Kami juga melihat banyak area untuk peningkatan untuk memastikan kompiler mudah digunakan oleh alat NodeJS lainnya, termasuk Rollup, Parcel, WebPack, dan Bazel. Jika Anda adalah pengelola alat apa pun, baik alat online atau lingkungan NodeJS, dan Anda ingin mengimplementasikan kompiler Stencil, silakan hubungi kami dan kami akan dengan senang hati membantu!

Semoga bermanfaat!

Apakah HMR tidak masuk secara otomatis ketika Stensil dibangun kembali? Jika demikian, ada ide mengapa tidak?

@shilman Itu tidak masuk karena tidak ada koneksi "nyata", dalam pengaturan yang saya miliki, antara Buku Cerita dan Stensil. Ini hanya tag <script> menunjuk ke aset yang dibangun.

bagaimana contoh cerita dalam kasus Anda?

@Hypnosphi Mereka terlihat seperti ini (sebuah cerita untuk default my-component yang dihasilkan Stensil dalam paket awal yang mereka buat saat Anda npm init stencil

import { document, console } from 'global';
import { storiesOf } from '@storybook/html';

storiesOf('My Component', module)
  .add('without a middle name', () => `
    <my-component
      first="Alex"
      last="LaFroscia"
    ></my-component>
  `)
  .add('with a middle name', () => `
    <my-component
      first="Alex"
      middle="Robert"
      last="LaFroscia"
    ></my-component>
  `);

Gunakan kemampuan StencilJS JSX (berdasarkan Preact saat ini) untuk menulis cerita dengan cara yang lebih mudah dikelola. Menggunakan JS lama biasa atau bahkan literal templat mungkin rumit...

@darondel Saya sepenuhnya setuju dengan kekhawatiran seputar pengalaman pengembang karena tidak memiliki JSX dalam file pembuatan Cerita. Saya telah menggunakan pendekatan itu di masa lalu, sebelum @storybook/html tersedia, dan menggunakan pengalaman Bereaksi yang OK.

Bagian dari keinginan untuk menjaga hal-hal sedekat mungkin dengan pengalaman html "default" adalah agar cerita bertindak sebagai dokumentasi tentang cara menggunakannya dari perspektif HTML -- jika tidak, mereka terkait dengan sesuatu seperti Preact, yang setidaknya di organisasi saya, tidak digunakan di tempat lain (kami terutama adalah toko Ember.js).

Anda menyebutkan bahwa tag template tidak akan menjadi pengalaman yang bagus, tapi saya pikir sesuatu seperti htm bisa menjadi pilihan yang bagus. Itu juga membuat proses build tetap bagus dan sederhana, karena tidak ada langkah build yang diperlukan, tetapi mungkin mempermudah interaksi dengan sesuatu seperti Knobs.

Saya juga berpikir bahwa mencoba berintegrasi dengan sesuatu seperti DocsPage yang akan datang mungkin menarik! Saya berani bertaruh bahwa beberapa pekerjaan yang telah dilakukan oleh @DesignByOnyx dapat berguna di sini, sehingga ada jalur untuk membaca "metadata" komponen Stencil untuk menghasilkan informasi dokumentasi secara otomatis. Mungkin bukan masalah "v1", tetapi sesuatu yang akan sangat keren untuk dilihat untuk "v1.1"! Saya sangat menyukai ide Anda untuk membuat sesuatu seperti addon kenop otomatis itu juga, itu akan sangat berguna!

Dengan DocsPages yang dirilis hari ini dengan Storybook 5.2, saya melakukan penelitian apakah mungkin untuk mendapatkan informasi tentang props dan semacamnya dari Stencil dan dirender ke dalam Storybook. Saya pikir itu mungkin, tetapi jelas menyoroti bagaimana akan berguna untuk memiliki addon atau preset yang disesuaikan untuk menggunakan Storybook dengan Stensil untuk menampung banyak "lem" yang diperlukan untuk itu.

Saya akan bermain-main dengan hal-hal sedikit lebih minggu ini dan melihat apakah saya dapat menempatkan sesuatu bersama-sama.

@alexlafroscia ingin membakukan bagaimana kerangka kerja yang berbeda mengomunikasikan data ini. Telah melihat sesuatu yang menarik dari Jetbrains (web_types? Cc @elevatebart ) dan juga @atanasster juga melakukan pekerjaan di area ini untuk caching jenis prop dalam file JSON untuk kinerja. Saya pikir kita harus menyatukan semua ini di 6.0

Saya tidak terbiasa dengan pekerjaan Jetbrains -- saya harus memeriksanya! Jika Anda memiliki informasi spesifik yang akan membantu untuk ditinjau, saya akan senang jika Anda dapat mengirimkannya dengan cara saya!

Dalam kasus Stencil, menurut saya "taruhan terbaik" adalah membuat proses pembuatan Stencil mengeluarkan dokumen JSON ke lokasi yang dikenal oleh addon Stencil Storybook atau dapat dikonfigurasi. Objek tersebut berisi semua informasi tentang props yang diharapkan, event yang dipancarkan, dan bahkan konten file readme untuk setiap komponen (tanpa dokumentasi props yang dibuat secara otomatis). Saya pikir kita bisa membangun cerita yang sangat menarik untuk mengisi Halaman Dokumen Buku Cerita dengan informasi dari file JSON itu.

{
  "timestamp": "2019-09-18T14:30:38",
  "compiler": {
    "name": "@stencil/core",
    "version": "1.3.2",
    "typescriptVersion": "3.5.3"
  },
  "components": [
    {
      "tag": "fluid-banner",
      "encapsulation": "shadow",
      "readme": "# fluid-banner\n\nThis is the contents of the README!\n",
      "docs": "This is the contents of the README!",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    },
    {
      "tag": "fluid-button",
      "encapsulation": "shadow",
      "readme": "# fluid-button\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "destructive",
          "type": "boolean",
          "mutable": false,
          "attr": "destructive",
          "reflectToAttr": false,
          "docs": "Whether to display in the `destructive` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "Whether the button should be treated as `disabled`",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "plain",
          "type": "boolean",
          "mutable": false,
          "attr": "plain",
          "reflectToAttr": false,
          "docs": "Whether to display in the `plain` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "primary",
          "type": "boolean",
          "mutable": false,
          "attr": "primary",
          "reflectToAttr": false,
          "docs": "Whether to display in the `primary` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"large\" | \"medium\" | \"small\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The size to display the button",
          "docsTags": [],
          "default": "\"medium\"",
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    }
  ]
}

Ini semacam peretasan (saya memintanya menulis output JSON ke dist/output.json dan kemudian menggunakan fetch untuk mengambil file) tetapi saya bisa mendapatkan rendering DocsPage untuk komponen Buku Cerita hanya dengan menimpa slot props yang dapat diambil oleh komponen DocsPage .

Tabel Props tidak sempurna, tapi cukup bagus; output Stensil menyediakan semua alat peraga yang diharapkan tabel, dan kemudian beberapa. Apa pun yang ada di readme.md untuk komponen akan dirender di bagian atas file.

import React, { useContext, useEffect, useState } from "react";
import { DocsPage, DocsContext } from "@storybook/addon-docs/blocks";

export const StorybookDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return null;
  }

  const component = payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );

  // Empty because we will use the whole component README
  const titleSlot = () => "";
  const subtitleSlot = () => "";

  const descriptionSlot = () => component.readme;
  const propsSlot = () => ({
    rows: component.props.map(prop => ({
      name: prop.name,
      type: prop.type,
      description: prop.docs,
      required: prop.required,
      defaultValue: prop.default
    }))
  });

  return React.createElement(
    DocsPage,
    { titleSlot, subtitleSlot, descriptionSlot, propsSlot },
    null
  );
};

Pembaruan: Selangkah lebih maju, saya mendefinisikan seluruh kustom DocsPage (bukan hanya mengganti slot) untuk mendapatkan tabel kedua dengan dokumentasi gaya kustom apa pun.

import { createElement as e, useContext, useEffect, useState } from "react";
import { DocsPage, PropsTable } from "@storybook/components";
import { H2, H3 } from "@storybook/components/html";
import {
  Anchor,
  Description,
  DocsContext,
  Preview,
  Story
} from "@storybook/addon-docs/blocks";

function useStencilComponent() {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return undefined;
  }

  return payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );
}

const DocsStory = ({
  id,
  name,
  expanded = true,
  withToolbar = false,
  parameters
}) =>
  e(
    Anchor,
    { storyId: id },
    expanded && e(H3, null, (parameters && parameters.displayName) || name),
    expanded &&
      parameters &&
      parameters.docs &&
      parameters.docs.storyDescription &&
      e(Description, { markdown: parameters.docs.storyDescription }, null),
    e(Preview, { withToolbar }, e(Story, { id, height: "auto" }, null))
  );

export const CustomDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const component = useStencilComponent();
  if (!component) {
    return null;
  }

  const { selectedKind, storyStore } = docsContext;
  const stories = storyStore.getStoriesForKind(selectedKind);
  const [primary, ...otherStories] = stories;

  const propDocs = component.props.length
    ? [
        e(H2, null, "Props"),
        e(
          PropsTable,
          {
            rows: component.props.map(prop => ({
              name: prop.name,
              type: prop.type,
              description: prop.docs,
              required: prop.required,
              defaultValue: JSON.parse(prop.default)
            }))
          },
          null
        )
      ]
    : [];

  const styleDocs = component.styles.length
    ? [
        e(H2, null, "Styles"),
        e(
          PropsTable,
          {
            rows: component.styles.map(style => ({
              name: style.name,
              description: style.docs
            }))
          },
          null
        )
      ]
    : [];

  const additionalStories = otherStories.length
    ? [
        e(H2, null, "Stories"),
        ...otherStories.map(story =>
          e(
            DocsStory,
            { key: story.id, ...story, expanded: true, withToolbar: false },
            null
          )
        )
      ]
    : [];

  return e(
    DocsPage,
    null,
    e(Description, { markdown: component.readme }, null),
    e(
      DocsStory,
      { key: primary.id, ...primary, expanded: false, withToolbar: true },
      null
    ),
    ...propDocs,
    ...styleDocs,
    ...additionalStories
  );
};

Halaman kustom juga memperbaiki fakta bahwa setiap cerita default tingginya 500px , yang terlalu tinggi

@alexlafroscia Ini luar biasa, pekerjaan yang luar biasa!

FYI, kita akan menggeneralisasi hal-hal tabel prop di 5.3. Secara khusus, kerangka kerja seperti Vue memiliki konsep slot & acara, jadi itu harus dibagi ke dalam tabel mereka sendiri. Mungkin gaya Anda bekerja bisa menggunakan mekanisme yang sama. https://github.com/storybookjs/storybook/issues/8123

Proyek Jetbrains yang saya maksud adalah yang ini (cc @piotrtomiak): https://github.com/JetBrains/web-types

Saya belum melihatnya secara detail, dan tidak tahu apakah itu tepat untuk kita. Namun, jika itu memenuhi kasus penggunaan kami dan tidak menambahkan terlalu banyak kerusakan ekstra, saya lebih suka menggunakan standar yang ada daripada menciptakan standar kami sendiri.

@shilman Terima kasih telah melihat upaya (JetBrains) kami dalam menghadirkan beberapa standar untuk pertukaran informasi metadata ke perpustakaan komponen web! Penggerak awal kami adalah hanya menyediakan penyelesaian kode yang baik untuk komponen Vue dalam file HTML, tetapi kami menemukan bahwa ada banyak lagi yang harus dicapai dengan standar seperti itu, jadi kami merancangnya dengan mempertimbangkan format pertukaran informasi umum (IDE, perkakas, dokumentasi). Sejauh ini, fokus kami adalah pada kerangka kerja Vue, namun kami selalu mengingat dukungan untuk Komponen Web atau kerangka kerja lainnya. Standar web-types cukup baru, tetapi kami telah mendengar beberapa umpan balik positif dari komunitas dan pengguna Vue. Saya secara aktif mempromosikan spesifikasi di komunitas Vue, tetapi sangat bagus untuk mendapatkan minat dari komunitas lain!

Saya pikir mungkin ada beberapa hal yang hilang dalam skema JSON web-types , yang akan khusus untuk kerangka kerja Anda dan itu dapat ditambahkan ke spesifikasi. Item spesifik Vue misalnya diawali dengan vue . Ada juga seluruh bagian yang hilang untuk mendokumentasikan dukungan CSS, yang dapat kami kerjakan untuk disertakan. Jadi, jika Anda merasa layak untuk memberikan web-types kesempatan, jangan ragu untuk mengajukan masalah atau membuat PR untuk fitur yang hilang.

Efek samping dari mendokumentasikan komponen Anda dalam format web-types akan menjadi penyelesaian kode yang baik ketika pengembang akan menyertakan perpustakaan Anda dalam proyek mereka. Kami berencana untuk mengimplementasikan dukungan umum semacam itu berdasarkan fitur umum web-types untuk semua kerangka kerja dalam waktu dekat. Saya cukup yakin bahwa dengan penerimaan komunitas yang lebih besar terhadap format tersebut, IDE lain akan mengikuti dengan dukungan untuk format tersebut, yang akan menguntungkan semua orang :)

@alexlafroscia kerja yang luar biasa! Integrasi Stensil dan Buku Cerita (bersama dengan https://github.com/storybookjs/storybook/issues/7644) terlihat bagus

Terima kasih telah menautkan ke masalah itu! Saya awalnya menempuh jalur yang sama (mencoba entah bagaimana menggunakan file README yang ada dan menariknya langsung ke DocsPage) tetapi akhirnya merasa lebih mudah hanya dengan menggunakan data yang dimasukkan Stensil ke dalam file JSON dokumen, karena _tidak_ menyertakan tabel alat peraga dan semuanya (karena data itu ada di tempat lain di file JSON dan data terstruktur sangat cocok untuk membuat tabel khusus).

@alexlafroscia Terima kasih telah berbagi temuan Anda. Bisakah saya bertanya bagaimana saya bisa men-debug CustomDocsPage ?

Saya sudah mencoba menambahkannya dengan addParameters dan sepertinya tidak menggunakan kebiasaan tetapi sebagai gantinya.

import { configure, addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

import { CustomDocsPage } from './docs.jsx';

addParameters({
  options: { theme: themes.dark },
  docs: { page: CustomDocsPage }
});

configure(require.context('../src', true, /\.(story|stories)\.(mdx)$/), module);

### Web Component
<Story name="WC">
    <component-name name="test"></component-name>
</Story>

WC itu sendiri dimuat di halaman dokumen buku cerita, bahkan tanpa menggunakan CustomDocsPage .
Apakah ada cara saya bisa men-debug komponen? Saya mencoba menambahkan beberapa log, tetapi saya tidak dapat melihatnya.

Terima kasih sebelumnya.

Saya juga mengalami masalah itu -- saya harus mengganti komponen DocsPage pada level "komponen"

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replaceing -docspage

apakah mungkin untuk membuat @storybook/html bekerja dengan jsx? akan membuat menulis cerita saya untuk komponen stensil lebih mudah. akan mendapatkan pengetikan, pelengkapan otomatis, dan tidak harus menggunakan document.createElement atau string template besar. mencoba mengelabui TypeScript dengan // @jsx di bagian atas menggunakan paket reaksi, tetapi itu tidak berhasil.

@vidarc apa kesalahan ketika Anda melakukan itu? Apakah Anda memiliki konfigurasi babel khusus ?

tidak banyak menyesuaikan. beberapa hal ditambahkan ke webpack. TypeScript pertama mengeluh tentang Cannot find name 'h' . tsconfig saya memiliki jsx = react dan jsxFactory = h. saya bisa menghilangkan peringatan itu menggunakan pengaturan pragma // <strong i="6">@jsx</strong> h di atas, tetapi kemudian saya mendapatkan kesalahan buku cerita karena tidak mengembalikan simpul atau string DOM.

akan mencoba: https://github.com/developit/vhtml selanjutnya

EDIT: bekerja sangat baik dengan jsx. tidak dapat menemukan cara membuatnya berfungsi dengan TypeScript: /

@vidarc jika h adalah singkatan dari hyperscript, ia mengembalikan objek khusus yang bukan string atau elemen DOM

vhtml sepertinya cara yang tepat

FYI, kami memiliki PR masuk untuk aplikasi web-components : https://github.com/storybookjs/storybook/pull/8400

Dapatkah seseorang di sini mengomentari bagaimana hal itu bersinggungan dengan masalah ini? @vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

Saya belum menguji #8400, tetapi sebelum menguji itu saya bisa membuat Stensil "langsung" bekerja melalui:

1. Jalankan start-storybook -s ./www dalam satu jendela.
2. Jalankan stencil build --dev --watch di yang lain.
3. Perbarui .storybook/config.ts untuk memuat ulang jendela di HMR:

const req = require.context('../src/components', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

Ini sedikit kikuk.

Alasan mengapa saya tidak dapat menyelidiki alternatif seperti https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js adalah karena import "./my-component" gagal sejak import { Component } from "@stencil/core" bukan ekspor yang valid, dan sebenarnya dilucuti sebagai bagian dari proses pembuatan:

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

Adakah yang benar-benar memiliki implementasi/konfigurasi stensil dan buku cerita yang berfungsi di IE11? Saya sudah mencoba setiap implementasi yang disebutkan di utas ini tanpa hasil.
selalu mengalami penolakan janji yang tidak tertangani TypeError: Skema Tidak Valid dengan versi stensil 1.2.4 -> 1.7.4.

@shilman Saya bisa mendapatkan komponen stensil di aplikasi web-components tetapi menurut saya itu hanya membacanya dengan cara yang sama seperti yang dilakukan semua orang dengan html , dan HMR tidak' t bereaksi terhadap pembaruan pada komponen stensil itu sendiri.

Akan lebih baik jika ada cara untuk mendapatkan kompiler stensil yang dibangun ke dalam urutan run buku cerita seperti untuk React, Angular, dll.

Saya akan terus mencoba cara agar komponen Stencil "langsung", tetapi masalah arsitektur yang saya hadapi adalah, kecuali saya salah, _Komponen stensil memerlukan langkah pembuatan khusus agar berfungsi_ ( stencil build --dev --watch ), dan tidak ada persamaan run-time.

Saya mencoba melakukan import { MyComponent} from "./MyComponent" , tetapi itu gagal karena @Component sebenarnya tidak diekspor dari @stencil/core . Faktanya, itu dilucuti sebagai bagian dari langkah pembuatan:

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

Mengetahui hal ini, pengujian saya selanjutnya adalah mempertahankan langkah build dengan React binding (https://github.com/ionic-team/stencil-ds-plugins), tetapi ganti logika HMR untuk menggunakan cerita React (bukan HTML) .

Mudah-mudahan ini akan membuat UX buku cerita cocok dengan React, meninggalkan Stencil hanya pada implementasi komponen.

Saya tidak berpikir ini adalah akhir dunia untuk mengharuskan stencil build dijalankan secara paralel dalam mode dev:

• Kami dapat menginstruksikan pengguna cara menjalankan ini secara bersamaan di package.json
• Prasetel stensil dapat memunculkan proses ini saat startup, dan kemudian mematikannya saat dimatikan jika kami ingin menyembunyikannya dari pengguna

Solusi dengan bagian yang bergerak lebih sedikit lebih disukai, tetapi jangan biarkan kebaikan menjadi musuh besar di sini. AFAIK untuk saat ini semua orang masih menggulirkan dukungan stensil mereka sendiri sekarang, dan ada peluang bagus untuk membantu menyederhanakan banyak hal bagi banyak orang di sini...

Menggunakan secara bersamaan adalah apa yang bekerja untuk saya saat ini.

Ada langkah bertahap yang pasti.

Hal utama yang membuat saya sebagai pengguna adalah stensil "mengapa" tidak berfungsi sama
sebagai cerita reaksi saya, yang tidak dapat diselesaikan tanpa spesifik stensil
perubahan.

Pada Kam, 31 Okt 2019, 17:02 Michael Shilman [email protected]
menulis:

Saya tidak berpikir itu adalah akhir dunia untuk membutuhkan pembuatan stensil menjadi
berjalan secara paralel dalam mode dev:

• Kami dapat menginstruksikan pengguna cara menjalankan ini secara bersamaan
  https://www.npmjs.com/package/concurrently di package.json mereka
• Prasetel stensil dapat menelurkan proses ini saat startup, dan kemudian membunuh
  saat dimatikan jika kami ingin menyembunyikannya dari pengguna

Solusi dengan lebih sedikit bagian yang bergerak lebih disukai, tetapi jangan biarkan baik
menjadi musuh besar di sini. AFAIK untuk saat ini semua orang masih memutar
dukungan stensil sendiri sekarang, dan ada peluang bagus untuk membantu
menyederhanakan banyak hal untuk banyak orang di sini...

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTORTMEW61WZGOZCOMTMEW61
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

satu pendekatan lain untuk ini adalah dengan jelas memisahkan UI (buku cerita) dari Pratinjau (stensil). Dengan buku cerita mandiri, ini seharusnya sudah mungkin.
Dengan begitu Anda bahkan dapat membuat buku cerita yang berarti waktu boot lebih cepat.

Dan kemudian Anda hanya akan menggunakan stensil build saat mengembangkan (tetapi masih menggunakan UI buku cerita). Yang berarti Anda akan mendapatkan semua barang yang didukung server dev stensil tanpa perlu memikirkan interopt dengan penyiapan paket web buku cerita.

Kami telah menyelidiki ini dengan menggunakan es-dev-server untuk mengaktifkan pratinjau untuk web-components . Kami semacam memiliki POC... tapi masih ada beberapa sisi kasar.
Namun, saya menganggap pendekatan yang sama persis harus bekerja untuk stensil juga.

Jika seseorang memiliki pertanyaan atau tertarik untuk menyelidiki ini untuk stensil atau membantu membuat proyek referensi dengan menggunakan es-dev-server maka saya yakin @LarsDenBakker dengan senang hati membagikan beberapa detail lebih lanjut

PS: semua ini hanya mungkin karena buku cerita memiliki pengaturan iframe yang luar biasa ini dengan pesan saluran untuk menjaga UI terpisah dari pratinjau

Hai semua

Setelah beberapa waktu dan banyak mengutak-atik ini adalah repo saya untuk implementasi buku cerita terintegrasi stensil https://github.com/Edd-Strickland/stencilbook.

Senang berdiskusi lebih lanjut semoga banyak hal sudah jelas dari readme dan dari melihat package.json untuk skrip.

Ini dibangun menggunakan komponen starter stensil vanilla dan implementasi HTML buku cerita vanilla.

Silahkan lihat dan review...

StencilBook - Pemula Buku Cerita Stensil

Ini adalah proyek awal untuk membangun Komponen Web mandiri menggunakan Stensil dan Buku Cerita.

Setensilan

Stensil adalah kompiler untuk membangun aplikasi web cepat menggunakan Komponen Web.

Stensil menggabungkan konsep terbaik dari kerangka kerja frontend paling populer ke dalam waktu kompilasi daripada alat run-time. Stensil mengambil TypeScript, JSX, lapisan DOM virtual kecil, pengikatan data satu arah yang efisien, pipa rendering asinkron (mirip dengan React Fiber), dan pemuatan lambat di luar kotak, dan menghasilkan 100% Komponen Web berbasis standar yang berjalan di browser apa pun yang mendukung spesifikasi Custom Elements v1.

Komponen stensil hanyalah Komponen Web, jadi mereka bekerja dalam kerangka kerja utama apa pun atau tanpa kerangka kerja sama sekali.

Mulai

Mengkloning repo

git clone https://github.com/Edd-Strickland/stencilbook.git

Ubah ke direktori dasar:

cd stencilbook

Instal modul:

npm install

dan jalankan build untuk seluruh repo:

npm run build:all

Setelah menjalankan buku cerita ini:

npm run storybook

Perintah lain untuk repo ini termasuk:

Buat stensil:

npm run stencil

Mulai stensil secara langsung dalam mode serve/watch; Berguna untuk mengubah komponen stensil secara langsung:

npm run stencil:start

Jalankan buku cerita dan build stensil dengan watch and serve, menghapus semua versi sebelumnya yang dibuat dan akan ditayangkan secara lokal:

npm run storybook:build:all

Sajikan buku cerita secara Lokal:

npm run storybook:serve

Setel ulang modul; Menghapus dan menginstal ulang modul simpul:

npm run reset:modules

Untuk menjalankan pengujian unit untuk komponen, jalankan:

npm test

Tes

Untuk menjalankan pengujian dalam mode tontonan:

npm run test.watch

Hasilkan komponen baru

Untuk menghasilkan komponen Stensil baru secara otomatis:

npm run generate

@Edd-Strickland Ini adalah awal yang baik! Jika saya dapat menyarankan agar Anda menambahkan skrip awal untuk boot yang lebih mudah, saya melakukannya "start": "npm-run-all -p stencil:start storybook" dan itu bekerja dengan cukup baik, kecuali tidak ada pemuatan ulang yang panas karena buku cerita sepertinya tidak mengenali kapan stensil telah dibuat.

... itu kecuali aku kehilangan sesuatu?

@shilman sepertinya ada paket @storybook/web-components yang sudah ada di master di alfa, tapi saya tidak melihat Stensil dirujuk di README.md: https://github.com/storybookjs/storybook/tree/next/ komponen aplikasi/web

Apakah ini upaya paralel? Jika tidak, apakah Anda mengetahui masalah terkait? Tidak dapat menemukan saat mencari web-components dalam masalah. Menemukan tag app: web-components , tetapi baru saja ditambahkan ke rilis dan bug.

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

Saya tidak mengerti apa yang diperlukan untuk menambahkan dukungan stensil yang tepat di atas dan di luar apa yang disediakan oleh @storybook/web-components . Saya yakin seseorang di utas ini tahu!

@Edd-Strickland Ini adalah awal yang baik! Jika saya dapat menyarankan agar Anda menambahkan skrip awal untuk boot yang lebih mudah, saya melakukannya "start": "npm-run-all -p stencil:start storybook" dan itu bekerja dengan cukup baik, kecuali tidak ada pemuatan ulang yang panas karena buku cerita sepertinya tidak mengenali kapan stensil telah dibuat.

... itu kecuali aku kehilangan sesuatu?

Hmm Maaf sibuk dan ada konferensi di akhir minggu lalu.

Saya bingung dengan masalah yang Anda alami, dapatkah Anda menyampaikan ini melalui masalah repo daripada di utas ini untuk detail lebih lanjut.

Namun jika Anda menginstal, dan kemudian menjalankan perintah buku cerita itu akan meluncurkan server jam tangan yang sesuai. Stensil akan otomatis HMR setiap kali Anda mengubah atau menambah atau memperbarui komponen saat ini sedang berjalan.

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

Saya tidak mengerti apa yang diperlukan untuk menambahkan dukungan stensil yang tepat di atas dan di luar apa yang disediakan oleh @storybook/web-components . Saya yakin seseorang di utas ini tahu!

tergantung, komponen web bekerja dengan instance Vanilla Saya belum membandingkan perbedaan di antara mereka namun stensil mengeluarkan komponen web tetapi berjalan sebagai kompiler untuk W/C daripada menjadi W/C secara default.

Jadi bisa dibilang ada kebutuhan untuk keduanya. Satu JS W/C asli dan satu untuk kompiler stensil jika Anda ingin mempercepat prototipe W/C berbasis Stencil di sisi buku cerita seperti yang Anda bisa dengan mengatakan komponen reaksi atau sudut.

Saya tidak punya waktu untuk menghubungi @daKmoR untuk mendiskusikan apakah ini duplikasi atau berlebihan mengingat pekerjaan mereka, namun untuk saat ini kami mempertahankan versi ini.

Saya baru-baru ini menemukan Bulmil karena pekerjaan mereka pada integrasi Stensil dengan nuxt-stencil dan contoh nuxt mereka.

Saya juga menemukan bahwa ada dukungan Storybook yang layak. Mungkin itu layak untuk dilihat juga. Saya tidak tahu internal / bagaimana perbedaannya dari keadaan utas ini saat ini tetapi berfungsi di luar kotak di dalam Bulmil setelah Anda menjalankan buku cerita .

@storybook/addon-actions sepertinya belum berfungsi atau saya belum bisa menjalankannya.

Mungkin kita bisa mendapatkan @Gomah di utas ini dan mendengar idenya untuk kolaborasi membuat dukungan stensil lebih baik untuk buku cerita?

Baru-baru ini saya menemukan Bulmil karena pekerjaan mereka pada integrasi Stensil dengan nuxt-stencil dan contoh nuxt mereka.

Saya juga menemukan bahwa ada dukungan Storybook yang layak. Mungkin itu layak untuk dilihat juga. Saya tidak tahu internal / bagaimana perbedaannya dari keadaan utas ini saat ini tetapi berfungsi di luar kotak di dalam Bulmil setelah Anda menjalankan buku cerita .

@storybook/addon-actions sepertinya belum berfungsi atau saya belum bisa menjalankannya.
Tentu saja dalam repo di atas add on-actions akan berfungsi, sebagai addon buku cerita standar

E2A: buku stensil bukan varian @Gomah .

Objek dengan integrasi stensil / SB dasar di atas hanyalah untuk membuat basis yang memungkinkan buku cerita ke buku cerita dan stensil ke stensil dan kemudian keduanya berintegrasi bersama untuk memungkinkan Anda memiliki komponen web yang dibuat melalui stensil ke dalam bingkai buku cerita.

Saya telah melakukan lonjakan dengan sprint tim saya selama dua minggu ke depan untuk melihat apakah versi W/C akan berjalan sebaik iterasi ini dan jika kami dapat mengonversi versi yang ada, kami menggunakan ke versi W/C.

Idealnya itu semua akan berfungsi sehingga tidak akan ada fragmentasi varian W/C namun tidak seperti implementasi W/C asli, Stensil sebenarnya bukan kerangka kerja. penyusun. Jadi mungkin masih ada baiknya jika Anda memiliki perbedaan untuk memungkinkan Anda menulis komponen BEJ yang akan ditampilkan sebagai W/C setelahnya.

Atau mungkin sangat sederhana.

Akan memberi tahu Anda setelah kami menyelesaikan spike.

tidak banyak menyesuaikan. beberapa hal ditambahkan ke webpack. TypeScript pertama mengeluh tentang Cannot find name 'h' . tsconfig saya memiliki jsx = react dan jsxFactory = h. saya bisa menghilangkan peringatan itu menggunakan pengaturan pragma // <strong i="7">@jsx</strong> h di atas, tetapi kemudian saya mendapatkan kesalahan buku cerita karena tidak mengembalikan simpul atau string DOM.

akan mencoba: https://github.com/developit/vhtml selanjutnya

EDIT: bekerja sangat baik dengan jsx. tidak dapat menemukan cara membuatnya berfungsi dengan TypeScript: /

Hai @vidarc. Apakah Anda dapat membuat ini berfungsi dengan sintaks storiesOf() ? Jika demikian, saya akan sangat penasaran untuk melihat bagaimana Anda melakukannya. Apakah Anda memiliki contoh kode atau basis kode untuk dibagikan?

Meskipun kami memiliki buku cerita dan stensil yang terintegrasi dan bekerja dengan baik dalam proyek kami, titik kesulitan terbesar yang kami miliki adalah harus menggunakan cara membuat cerita dengan document.createElement() untuk komponen dengan objek props dll. Jika vhtml dapat memecahkan ini, itu akan luar biasa!

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

Saya tidak mengerti apa yang diperlukan untuk menambahkan dukungan stensil yang tepat di atas dan di luar apa yang disediakan oleh @storybook/web-components . Saya yakin seseorang di utas ini tahu!

Anda benar, dan saya setuju. Saya perhatikan di README.md folder yang disertakan, dan melihat kerangka kerja komponen web lainnya, tetapi tidak stensil:

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

Oleh karena itu saya pikir stensil tidak disertakan karena suatu alasan. Tetapi jika ini berfungsi dengan baik tanpa tambahan apa pun, itu tidak masalah bagi saya.

Btw, bisakah masalah ini sekarang ditutup, karena diselesaikan dengan preset komponen web yang disebutkan di atas?

tidak banyak menyesuaikan. beberapa hal ditambahkan ke webpack. TypeScript pertama mengeluh tentang Cannot find name 'h' . tsconfig saya memiliki jsx = react dan jsxFactory = h. saya bisa menghilangkan peringatan itu menggunakan pengaturan pragma // <strong i="8">@jsx</strong> h di atas, tetapi kemudian saya mendapatkan kesalahan buku cerita karena tidak mengembalikan simpul atau string DOM.
akan mencoba: https://github.com/developit/vhtml selanjutnya
EDIT: bekerja sangat baik dengan jsx. tidak dapat menemukan cara membuatnya berfungsi dengan TypeScript: /

Hai @vidarc. Apakah Anda dapat membuat ini berfungsi dengan sintaks storiesOf() ? Jika demikian, saya akan sangat penasaran untuk melihat bagaimana Anda melakukannya. Apakah Anda memiliki contoh kode atau basis kode untuk dibagikan?

Meskipun kami memiliki buku cerita dan stensil yang terintegrasi dan bekerja dengan baik dalam proyek kami, titik kesulitan terbesar yang kami miliki adalah harus menggunakan cara membuat cerita dengan document.createElement() untuk komponen dengan objek props dll. Jika vhtml dapat memecahkan ini, itu akan luar biasa!

Anda dapat menjadikannya sebagai cerita CSF langsung dengan yang terbaru dan menukar cerita Anda ke format yang berfungsi dengan baik. Juga jika Anda mengimpor beberapa pabrik data untuk mengisi objek data maka Anda bisa menggunakannya untuk menghidrasi alat peraga Anda....

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+
Saya tidak mengerti apa yang diperlukan untuk menambahkan dukungan stensil yang tepat di atas dan di luar apa yang disediakan oleh @storybook/web-components . Saya yakin seseorang di utas ini tahu!

Anda benar, dan saya setuju. Saya perhatikan di README.md folder yang disertakan, dan melihat kerangka kerja komponen web lainnya, tetapi tidak stensil:

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

Oleh karena itu saya pikir stensil tidak disertakan karena suatu alasan. Tetapi jika ini berfungsi dengan baik tanpa tambahan apa pun, itu tidak masalah bagi saya.

Btw, bisakah masalah ini sekarang ditutup, karena diselesaikan dengan preset komponen web yang disebutkan di atas?

Saya akan menguji apakah itu berfungsi dengan stensil dan akan melaporkan kembali maka kami dapat menutup. Tidak ada gunanya menutup jika tidak benar-benar bekerja dengan stensil...

...

Hai @vidarc. Apakah Anda dapat membuat ini berfungsi dengan sintaks storiesOf() ? Jika demikian, saya akan sangat penasaran untuk melihat bagaimana Anda melakukannya. Apakah Anda memiliki contoh kode atau basis kode untuk dibagikan?
Meskipun kami memiliki buku cerita dan stensil yang terintegrasi dan bekerja dengan baik dalam proyek kami, titik kesulitan terbesar yang kami miliki adalah harus menggunakan cara membuat cerita dengan document.createElement() untuk komponen dengan objek props dll. Jika vhtml dapat memecahkan ini, itu akan luar biasa!

Anda dapat menjadikannya sebagai cerita CSF langsung dengan yang terbaru dan menukar cerita Anda ke format yang berfungsi dengan baik. Juga jika Anda mengimpor beberapa pabrik data untuk mengisi objek data maka Anda bisa menggunakannya untuk menghidrasi alat peraga Anda....

Terima kasih. Tidak menyadari bahwa CSF sekarang adalah cara yang direkomendasikan untuk menulis cerita. Sudahkah Anda berhasil membuat addon jsx berfungsi dengan vhtml btw, atau apakah itu tidak mungkin?

...

Hai @vidarc. Apakah Anda dapat membuat ini berfungsi dengan sintaks storiesOf() ? Jika demikian, saya akan sangat penasaran untuk melihat bagaimana Anda melakukannya. Apakah Anda memiliki contoh kode atau basis kode untuk dibagikan?
Meskipun kami memiliki buku cerita dan stensil yang terintegrasi dan bekerja dengan baik dalam proyek kami, titik kesulitan terbesar yang kami miliki adalah harus menggunakan cara membuat cerita dengan document.createElement() untuk komponen dengan objek props dll. Jika vhtml dapat memecahkan ini, itu akan luar biasa!

Anda dapat menjadikannya sebagai cerita CSF langsung dengan yang terbaru dan menukar cerita Anda ke format yang berfungsi dengan baik. Juga jika Anda mengimpor beberapa pabrik data untuk mengisi objek data maka Anda bisa menggunakannya untuk menghidrasi alat peraga Anda....

Terima kasih. Tidak menyadari bahwa CSF sekarang adalah cara yang direkomendasikan untuk menulis cerita. Sudahkah Anda berhasil membuat addon jsx berfungsi dengan vhtml btw, atau apakah itu tidak mungkin?

Jadi JSX diurai langsung melalui stencil compiler ke dalam shadow dom. Jadi selama Anda menggunakan integrasi kompiler ke dalam buku cerita, Anda menulis komponen stensil standar Anda dan kemudian memasukkannya ke dalam cerita CSF dan kemudian mengimpor di pabrik data Anda untuk mengisi prop's.

Repo vanilla yang saya posting melakukan ini di luar kotak tidak perlu plugin VHTML atau hal lain tidak perlu bahkan untuk pembungkus Anda dapat menulis langsung sebagai stensil dan hanya output.

Anda dapat menggunakan sintaks storyOf tetapi kemudian Anda terkunci ke dalam Pola document.createElement klasik.
Misalnya cerita lama Sintaks ini untuk ikon kami

import { storiesOf } from '@storybook/html';
/** 
  * Import readme from component into the story 
  */
import markdown from './readme.md';

storiesOf('1-Atoms/icon', module)
    .addParameters({ viewport: { defaultViewport: 'responsive' } })
    .add('knobs', () => {
        /**
         * Add Knobs to component panel
         * Set within Each knob as the third parameter
         */
        let icon = document.createElement('namespace-icon');
        icon.classList.add('namespace-action-plan');
        icon.size = 'medium';
        return icon;
    }, { notes: { markdown } });

VS

import centered from '@storybook/addon-centered/html';
import markdown from './readme.md';

export default {
  title: 'Atoms|Icon',
  decorators: [centered],
  parameters: {
    notes: { markdown },
    viewport: { defaultViewport: 'responsive' }
  }
};

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

tidak banyak menyesuaikan. beberapa hal ditambahkan ke webpack. TypeScript pertama mengeluh tentang Cannot find name 'h' . tsconfig saya memiliki jsx = react dan jsxFactory = h. saya bisa menghilangkan peringatan itu menggunakan pengaturan pragma // <strong i="8">@jsx</strong> h di atas, tetapi kemudian saya mendapatkan kesalahan buku cerita karena tidak mengembalikan simpul atau string DOM.
akan mencoba: https://github.com/developit/vhtml selanjutnya
EDIT: bekerja sangat baik dengan jsx. tidak dapat menemukan cara membuatnya berfungsi dengan TypeScript: /

Hai @vidarc. Apakah Anda dapat membuat ini berfungsi dengan sintaks storiesOf() ? Jika demikian, saya akan sangat penasaran untuk melihat bagaimana Anda melakukannya. Apakah Anda memiliki contoh kode atau basis kode untuk dibagikan?

Meskipun kami memiliki buku cerita dan stensil yang terintegrasi dan bekerja dengan baik dalam proyek kami, titik kesulitan terbesar yang kami miliki adalah harus menggunakan cara membuat cerita dengan document.createElement() untuk komponen dengan objek props dll. Jika vhtml dapat memecahkan ini, itu akan luar biasa!

@robaxelsen
Saya akhirnya hanya menggunakan @storybook/react dan memodifikasi konfigurasi webpack untuk mengubah file MD bersama dengan file MDX. Kemudian hanya sedikit kode untuk membuat kenop berdasarkan stensil keluaran json doc yang disediakan. Untuk kode stensil, kami menggunakan salinan buku cerita dari CLI mereka dan menautkan file-file itu di file preview-head.html. Sesuai dengan tujuan saya cukup baik.

@Edd-Strickland Terima kasih banyak atas contoh dan penjelasannya. Dengan contoh terakhir Anda, saya masih harus meneruskan atribut secara terprogram, sebagai alat peraga pada elemen. Harapan saya adalah saya bisa, baik dengan vhtml atau kompiler stensil biasa menulis cerita saya sebagai JSX.

Jadi alih-alih:

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

...Saya akan menulis:

export const knobs = (): HTMLNamespaceIconElement => {
    return (
        <namespace-icon class="namespace-action-plan" size="medium">
        </namespace-icon>
    );
};

Baik untuk keterbacaan, maupun kemudahan dalam membuat cerita. Ini tidak mungkin, lalu? Jika memungkinkan, bisakah Anda memberikan contoh cepat?

Kami juga dapat berbicara dalam obrolan perselisihan jika itu lebih mudah. Saya Rob Axelsen#1373 .

EDIT: Untuk menambahkan di atas, saya juga telah melihat dokumentasi CSF, dan mencoba dengan sintaks JSX mengimpor h , tetapi melempar kesalahan "Mengharapkan cuplikan HTML atau simpul DOM dari cerita: "Kisah Sederhana" dari "Komponen".":

export const simpleStory = () => <namespace-icon class="namespace-action-plan" size="medium"></name-spaceicon>;

Jika ini tentang menulis cerita yang perlu mengatur properti untuk komponen web maka Anda dapat melihat @storybook/web-components . Itu menggunakan lit-html untuk membuat html secara deklaratif dengan properti.

Ini akan berfungsi saat menjalankan buku cerita dan stensil berdampingan :)

Kecuali stensil tidak menggunakan html menyala. Itu hal Vue...

@shilman sepertinya ada paket @storybook/web-components yang sudah ada di master di alfa, tapi saya tidak melihat Stensil dirujuk di README.md: https://github.com/storybookjs/storybook/tree/next/ komponen aplikasi/web

Bagaimana kami mengunduh dan menguji paket komponen web yang ditautkan repo di sini tidak memiliki tindakan klon, dll?

@Edd-Strickland itu hanya sebuah direktori di monorepo buku cerita utama

Kecuali stensil tidak menggunakan html menyala. Itu hal Vue...

itu lit thing

namun, itulah keindahan komponen web - tidak masalah apa stensil yang digunakan di balik kap mesin. Anda dapat menggunakan lit-html atau cara lain untuk mendefinisikan cerita Anda. Yang mungkin Anda butuhkan hanyalah cara menulis "html" dengan properti.

Untuk lit-html akan terlihat seperti ini

export myStory = () => {
  const dataArray = [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
  return html`
    <my-lit-component .title=${'some title'} power="unlimited">
      <p> some light dom</p>
    </my-lit-component>
    <my-stencil-component super-mode .data=${dataArray}></my-stencil-component>
  `;
}

Jadi jika Anda akan masuk ke DevTools di Chrome dalam cerita, Anda dapat memilih komponen yang menyala dan Anda dapat membaca detail berikut

• judul properti misalnya console.log($0.title) // beberapa judul
• atribut power misal console.log($0.getAttribute('power')) // unlimited

untuk komponen stensilnya akan "sama"

• data properti misalnya console.log($0.data) // [{ nama: 'john', usia: 21 }, { nama: 'maria', usia: 28 }];
• atribut super-mode misalnya console.log($0.hasAttribute('super-mode')) // true

lit-html hanya merender dom... di mana/bagaimana elemen dom didaftarkan lit-html tidak tahu/peduli - jadi teknologi mana yang digunakan untuk setiap komponen bisa sangat berbeda... misalnya Anda dapat memiliki komponen yang adalah lit-element, stencil, vanilla HTMLElement atau bahkan bisa menjadi pembungkus komponen web untuk aplikasi reaksi/vue/angular penuh...

stensil mungkin merupakan kompiler tetapi setelah dikompilasi ke komponen web, stensil dapat digunakan hanya sebagai dom

PS: @storybook/web-components menggunakan lit-html

Tim Stencil sedang memfaktorkan ulang kompiler yang menurut saya akan mengubah integrasi Stensil/Buku Cerita.

Jika ada yang hanya akan menggunakan Stensil dan Buku Cerita melalui React checkout https://github.com/the-road-to-learn-react/use-custom-element yang memungkinkan Anda melewatkan array dan objek. Saya akan mencoba sendiri nanti tetapi ini dapat membantu beberapa orang.

Bagi mereka yang tertarik, saya telah menerbitkan starter untuk menggabungkan Storybook/react dan Stencil: https://github.com/bbellmyers/stencil-storybook-starter. Perhatikan bahwa dengan konfigurasi ini, perubahan pada komponen memerlukan penyegaran keras di browser, tetapi perubahan pada cerita tidak.

Sepertinya buku cerita sedang mengembangkan buku cerita untuk komponen web. Saya mencobanya dengan stensil dan itu bekerja dengan cukup baik.

https://github.com/storybookjs/storybook/tree/next/app/web-components

@sem4phor dapatkah Anda membagikan konfigurasi Anda?

Saya mendapatkan kesalahan tentang lit-html pada pemasangan buku cerita baru untuk komponen web

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

@dmartinjs Anda perlu menginstal sendiri 'lit-html' yang digunakan untuk merender komponen dalam contoh default.

@Edd-Strickland kami menambahkan buku cerita untuk komponen web & di 6.0.0 buku cerita untuk polimer akan ditinggalkan / tidak diperbarui lagi.

Apakah ada yang perlu dilakukan untuk membuat buku cerita untuk komponen web berfungsi untuk komponen stensil?

Buku cerita komponen web dapat merender komponen komponen web stensil, tetapi stensil tidak dapat berjalan di browser sebagaimana adanya dan perlu dikompilasi. Oleh karena itu masih perlu penanganan khusus, kecuali jika Anda mengkompilasi komponen stensil sebelum menjalankan buku cerita.

@LarsDenBakker apakah ini masalah menambahkan plugin/loader webpack agar yang di atas berfungsi. (Saya membayangkan itu diinginkan untuk membuat komponen stensil HMR & kompilasi secara dinamis)

Ya, meskipun stensilnya sendiri menggunakan rollup. Jika langkah kompilasi dapat digunakan sebagai proyek terpisah, Anda mungkin dapat membuatnya menjadi plugin webpack. Saya tidak cukup tahu tentang internal untuk itu.

Stensil tidak menggunakan Webpack. Ini menggunakan Rollup sebagai gantinya.

Dimungkinkan menggunakan repo yang saya atur agar keduanya berfungsi dengan baik dan mengaktifkan setara HMR di Stensil dengan panggilan -watch. Sehingga stensil dimuat ulang saat stensil diperbarui dan Buku Cerita itu dimuat ulang saat diperbarui.

Jadi tidak perlu membangun setiap kali karena ini akan menutupinya.

Sementara saya tidak punya waktu baru-baru ini untuk memperbarui repo dengan SB atau Stensil terbaru, proses ini akan tetap berfungsi dan Anda kemudian dapat memutakhirkan repo dengan versi terbaru.

Terima kasih

@Edd-Strickland kami menambahkan buku cerita untuk komponen web & di 6.0.0 buku cerita untuk polimer akan ditinggalkan / tidak diperbarui lagi.

Apakah ada yang perlu dilakukan untuk membuat buku cerita untuk komponen web berfungsi untuk komponen stensil?

ya itu masih tidak terlalu memperhitungkan live reload/ HMR karena seperti yang dijelaskan di atas perbedaan antara penggunaan webpack dan penggunaan roll up jadi saat ini jika Anda ingin menggunakan versi SB WC maka diperlukan stensil build penuh untuk merender maka semua kebaikan HMR hilang dari stensil.

Versi ini saat ini didasarkan pada versi HTML bukan versi polimer sehingga ini tidak akan berdampak pada tujuan jangka panjang untuk menghentikan versi tersebut.

@LarsDenBakker apakah ini masalah menambahkan plugin/loader webpack agar yang di atas berfungsi. (Saya membayangkan itu diinginkan untuk membuat komponen stensil HMR & kompilasi secara dinamis)

Saya tidak akan menyarankannya, versi webpack dari Stencil adalah jalur pengembangan yang jauh lebih sulit dan meningkatkan jejak ketergantungan tanpa perlu, Seperti yang ditunjukkan dalam repo yang saya buat, sangat mungkin untuk menjalankan stensil di jam tangan yang dikompilasi ulang secara langsung di setiap perubahan instans WC atau SB. Ini tentang mengonfigurasinya untuk memungkinkan keduanya.

Ya, meskipun stensilnya sendiri menggunakan rollup. Jika langkah kompilasi dapat digunakan sebagai proyek terpisah, Anda mungkin dapat membuatnya menjadi plugin webpack. Saya tidak cukup tahu tentang internal untuk itu.

Sudah ada plugin WP stensil namun ini bukan ketergantungan yang didukung atau disetujui komunitas.

cc @jthoms1 @adamdbradley

@dmartinjs Anda perlu menginstal sendiri 'lit-html' yang digunakan untuk merender komponen dalam contoh default.

@sem4phor dapatkah Anda membagikan konfigurasi Anda?

Saya mendapatkan kesalahan tentang lit-html pada pemasangan buku cerita baru untuk komponen web

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Ada tanggapan tentang ini? Saya harus menginstal dependensi ini sendiri. Jika digunakan oleh @storybook/web-components, maka harus diinstal secara otomatis sebagai dependensi...?

@LeeBurton tidak jika itu ketergantungan rekan? (Tidak yakin apakah ya, jika tidak mungkin seharusnya) cc @daKmoR

@LeeBurton pada saat saya mengujinya lit-html adalah ketergantungan rekan. Adalah normal bahwa Anda harus menginstal dependensi rekan sendiri. https://nodejs.org/es/blog/npm/peer-dependencies/

Untuk apa nilainya, saya mendapatkan stensil yang bekerja dengan konfigurasi ini di .storybook/preview.js

import { defineCustomElements } from "../dist/esm/loader.mjs"
defineCustomElements()

configure(require.context('../src', true, /.*\.stories\.(js|mdx)$/), module);

@idmyn Saya mencobanya dan ketika dikompilasi, setiap perubahan yang dilakukan pada file src apa pun masih tidak dapat dimuat ke browser tanpa memuat ulang manual secara manual.

Saya membuatnya bekerja dengan menjalankan Stencil's build secara lokal dengan arloji diaktifkan dalam satu skrip run npm saat menjalankan start-storybook secara paralel dengan paket npm-run-all .

Saya mengonfigurasi konfigurasi webpack buku cerita untuk menonton file dist Stencil menggunakan yang berikut ini di main.js saya:

const path = require('path');
const glob = require('glob');

module.exports = {
  webpackFinal: (config) => {
    // watch all revelant files in dist folder
    const distDir = path.resolve(__dirname, '../dist');
    const files = glob.sync(`${distDir}/**/*.entry.js`, { absolute: true, ignore: ['**/*.system.entry.js'] });
    config.entry.push(...files);
    return config;
  },
};

Anda mungkin harus sedikit mengubah jalur/file untuk proyek Anda, tetapi ini berhasil untuk saya.

Hanya ingin tahu, apakah @DesignByOnyx atau @Edd-Strickland pernah melihat untuk mengubah solusi mereka menjadi preset untuk 6? Saya telah menggunakan repo dan - seperti biasanya - saya suka bit masing-masing :-)

Saya telah memindahkan salinan @Edd-Strickland ke 6.0.0-beta dengan cukup berhasil, meskipun saya merasa itu tidak selalu membangun kembali semuanya ketika melihat perubahan (misalnya readme.md).

Apakah ini tersedia untuk umum @paulfelton?

Sekarang, bantu dirimu sendiri :-)

Saya telah memotong proyek Edd . @Edd-Strickland, haruskah saya memasukkan PR? Ini akan membutuhkan review yang baik, saya tidak ahli dalam hal ini.

Saya telah menabrak paket, memfaktorkan ulang konfigurasi ke format baru. Saya harus menambahkan pengetikan dan merujuknya di tsconfig untuk mendapatkan cerita untuk mengimpor readme stensil, dan menambahkan konfigurasi untuk menerjemahkan 'catatan' ke 'dokumen'.

Daftar Keinginan:

• Nah, saya ingin melihat integrasi menghasilkan cerita dasar dari komponen stensil. Idealnya, baik mdx dan CSF.
• Saya ingin berpindah dari Storybook HTML ke rasa Storybook Webcomponent, meskipun saya tidak yakin apakah ada manfaatnya melakukannya. Itu hanya terasa lebih alami.
• Saya ingin dokumen stensil untuk mengimpor lebih alami ke addon-docs baru, daripada pergi 'melalui' catatan.
• Semua ini melalui preset :-)

@paulfelton apakah Anda butuh sesuatu dari saya?

@ndelangen Saya tidak yakin. Seperti yang mungkin telah Anda kumpulkan, saya cukup baru dalam Stensil dan Buku Cerita, jadi kumpulkan saja apa yang dapat saya tarik dari berbagai diskusi masalah, google, dll.

Saya juga mencoba repo pemula, sangat terinspirasi tetapi semua upaya hebat dalam masalah ini (terima kasih semua!).

https://github.com/elwynelwyn/stencilbook-ding

Menggunakan @storybook/web-components , bekerja dengan add-on penting (mis. Kontrol, Tindakan). Versi terbaru dari semuanya pada tahap ini..

Beberapa integrasi ekstra antara server dev Stencil dan bingkai pratinjau Storybook (sehingga overlay kesalahan Stencil muncul inline di Storybook - lebih baik DX!) (periksa ./storybook/preview-body.html dan ./src/index.html untuk deets).

~ Hancurkan devserver Stencil menjadi start-storybook sehingga Anda hanya menjalankan satu perintah dan itu memutar stensil di belakang layar.~
EDIT: sederhanakan ini dengan concurrently + wait-on - tunggu Stencil berputar, lalu lanjutkan dengan Storybook

Perubahan kode (ke komponen Stensil atau cerita Buku Cerita) akan memuat ulang bingkai pratinjau (bukan seluruh aplikasi buku cerita). Ini bukan HMR yang tepat tetapi cukup bagus untuk dikembangkan!

Bagus. Tautan tidak berfungsi.

Ups, repo bersifat publik sekarang ^

Saya telah mengumpulkan repo boilerplate menggunakan stensil v2 dan @storybook/web-components v6 di sini: https://github.com/bjankord/stencil-storybook-boilerplate

Ada juga repo di https://github.com/miriamgonp/stencil-web-components-boilerplate yang dibuat oleh @miriamgonp dari saluran perselisihan Storybook/Stencil. Adakah yang suka menggabungkan boilerplate yang muncul ini? ;-)

Kedua repo ini tampak hebat. Jika mereka dikonsolidasikan menjadi satu akan menjadi tambahan yang bagus. Dan jika ada yang mau berkontribusi dengan tutorial di Intro to Storybook berdasarkan dua repo ini, kami akan sangat menghargai. Beri tahu saya jika ada yang mau membantu kami dan saya dengan senang hati akan membantu anggota komunitas yang menggunakan Stencil.

saya mendapat solusi hmr yang tepat ;) segera hadir!

saya mendapat solusi hmr yang tepat ;) segera hadir!

ini dia!
Stensil 2+ & Buku Cerita 6+ (Versi Stensil Lama juga berfungsi ;))
https://github.com/dutscher/stencil-storybook
bersenang-senang dan bersorak

edit: dengan buku cerita di gh-pages https://dutscher.github.io/stencil-storybook/index.

Tukar ini ^^ ke proyek kami minggu lalu dan setelah menghapus bit yang tidak relevan bagi kami (Bootstrap, scss, chromatic dll) dan memperbaiki beberapa hal kecil (misalnya nama package.json tidak berfungsi di mana-mana, itu diimpor karena berada di @ myorg/my-proj format) sudah bekerja dengan sangat baik.

Telah menggunakannya selama sekitar satu hari sekarang dan HMR sangat bagus!

@elwynelwyn apa yang perlu kita lakukan di sisi buku cerita menurutmu?

@ndelangen yang penting adalah:

1. proxy https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. injeksi produksi stensil melalui main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. dan skrip npm sederhana dan minimal untuk dev dan prod https://github.com/dutscher/stencil-storybook/blob/master/package.json

Bersulang