11tyby

11 puluh

Boilerplate 11 puluh terorganisir untuk membuat Anda bangun dan berlari cepat. Fitur TypeScript, dukungan JSX asli melalui preact, modul CSS dengan sass, konfigurasi webpack yang ditentukan dengan baik untuk DX yang hebat, dan semua pra-dioptimalkan untuk kinerja.

Demo: https://11tyby.netlify.app/

Mengapa

Mendapatkan pengaturan dengan alat yang diperlukan untuk menangani naskah, JSX, impor dinamis, sass dll memakan waktu. Proyek ini juga memiliki hidrasi parsial untuk mengurangi jumlah kode yang dikirimkan kepada pengguna Anda.

Struktur

Proyek ini disusun melalui pola modul, file dikelompokkan melalui fitur, misalnya ./src/modules/home . Ini memungkinkan Anda untuk lebih baik membuktikan aplikasi Anda di masa depan saat tumbuh, dan melokalisasi kode di tempat yang dibutuhkan. Halaman Anda *.11ty.tsx File berada di dalam folder fitur yang relevan, dan mengekspor properti permalink untuk Anda menentukan struktur URL mereka, misalnya:

 module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : '/my-feature/index.html' ,
  } ) ,
} ; 

Gaya

11 PYTYBY hadir pre-setup dengan dukungan untuk modul CSS dan SASS. Anda memiliki dua opsi untuk mengimpor gaya, secara global atau terlokalisasi. Untuk mengonversi file SASS atau CSS menjadi modul CSS, Anda harus menerapkan akhiran .module ke file Anda, misalnya login.module.css . Anda kemudian dapat mengimpor ini langsung ke komponen:

 import style from './login.module.scss' ;

/*[...]*/

function Login ( ) {
  return < form class = { style . form } > /*[...]*/ </ form > ;
}

Untuk mengimpor gaya secara global, cukup tambahkan pernyataan impor yang tidak dikembalikan ke file yang ingin Anda muat, misalnya:

 import './global.css' ;

/*[...]*/

Untuk menerapkan lembar gaya yang dihasilkan ke halaman, Anda harus menambahkan properti cssPath dalam objek data yang diekspor dari file *.11ty.tsx Anda, misalnya:

 function Page ( ) {
  return < main class = { style . wrapper } > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    cssPath : 'login/login.11ty.css' , // <----
  } ) ,
} ;

Jalur akan cocok dengan folder modul masing -masing, dan namanya akan mencerminkan nama file *.11ty.tsx Anda tetapi dengan ekstensi CSS.

Hidrasi

11 puluh termasuk paket yang didedikasikan untuk menerapkan hidrasi parsial. Ini berfungsi sebagai hoc, membungkus komponen yang ingin Anda hycrate pada klien. Anda dapat menerapkan ini sebagai berikut:

 import { define } from 'preactement' ;

/*[...]*/

function MainForm ( ) {
  return < form > /*[...]*/ </ form > ;
}

/*[...]*/

const Form = define ( 'main-form' , ( ) => MainForm ) ;

/*[...]*/

export { Form } ;

Dianjurkan agar Anda membuat komponen dalam folder mereka sendiri, dan menerapkan fungsi ini dalam file index.ts di dalam. Dengan begitu Anda dapat memisahkan "transformasi" apa pun yang mungkin dibutuhkan komponen saat runtime dengan komponen itu sendiri, Anda dapat melihat contoh di sini.

Setelah Anda memiliki komponen terhidrasi, Anda harus mengimpornya ke file "entri". Ini sufiks dengan .entry , dan harus ditempatkan di dalam folder modul masing -masing, mis ./src/home/home.entry.ts .

File entri perlu mengimpor komponen terhidrasi Anda, misalnya:

 import '@/modules/home/components/form' ;

File ini kemudian dirujuk dalam file *.11ty.tsx Anda dengan memasukkannya ke objek data yang diekspor dari komponen Anda, misalnya:

 /*[...]*/
function Page ( ) {
  return < main > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    jsPath : 'home/home.entry.js' , // <----
  } ) ,
} ;

Sebagai contoh yang berfungsi, lihatlah modul home di sini.

Data

Semua metode resmi 11 puluh untuk mengumpulkan data dari API atau sebaliknya, akan bekerja di sini. Ada banyak contoh hebat tentang cara melakukan ini dalam dokumentasi resmi 11 puluh, termasuk penggunaan graphql: https://www.11ty.dev/docs/data-js/.

Untuk mendefinisikan data global , tambahkan file JSON, JS atau TypeScript ke folder ./src/data . Ini kemudian akan diuraikan oleh 11 puluh dan ditambahkan melalui kaskade data. Anda dapat mengaksesnya secara langsung di file .11ty.ts* Anda.

Misalnya, jika Anda menambahkan file global.ts ke ./src/data , Anda akan mengakses ini melalui properti global di objek argumen halaman Anda:

 interface IProps {
  global : {
    title : string ;
  } ;
}

/*[...]*/

function Page ( { global } : IProps ) {
  return (
    < main >
      < h1 > { global . title } </ h1 >
    </ main >
  ) ;
}

Untuk menambahkan data lokal, misalnya data khusus ke modul, tambahkan file yang sufiks dengan .data dalam folder modul yang relevan. Ini kemudian dapat diakses dengan cara yang persis sama seperti yang ditunjukkan di atas, tetapi hanya untuk halaman itu. Misalnya, jika Anda menambahkan home.data.ts ke ./src/modules/home , file beranda Anda 11ty.tsx file akan memiliki akses ke nilai yang dimiliki dalam file data itu.

Instalasi

1. Klon atau unduh repositori

git clone [email protected]:jahilldev/11tyby.git

2. Pasang dependensi proyek

yarn

Perkembangan

yarn start

Membangun produksi

yarn build