11tyby

11tyby

Un chauffeur organisé 11ty pour vous mettre en service. Caractéristiques TypeScript, prise en charge JSX native via PREACT, modules CSS avec SASS, une configuration WebPack bien définie pour Great DX et tous pré-optimisés pour les performances.

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

Pourquoi

Obtenir la configuration avec l'outillage nécessaire pour gérer TypeScript, JSX, Dynamic Imports, Sass, etc. prend du temps. Ce projet a également une hydratation partielle pour réduire la quantité de code expédiée à vos utilisateurs.

Structure

Le projet est structuré via le motif du module, les fichiers sont regroupés via la fonctionnalité, par exemple ./src/modules/home . Cela vous permet d'améliorer la preuve future de votre application au fur et à mesure de sa croissance et de localiser le code là où il est nécessaire. Votre page *.11ty.tsx Les fichiers résident dans leur dossier de fonctionnalité pertinent et exportez une propriété permalink pour définir leur structure URL, par exemple:

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

Coiffage

11TYBY vient prédéfini avec le support pour les modules CSS et SASS. Vous avez deux options pour importer des styles, à l'échelle mondiale ou localisée. Pour convertir un fichier SASS ou CSS en module CSS, vous devrez appliquer un suffixe .module à votre fichier, par exemple login.module.css . Vous pouvez ensuite l'importer directement dans un composant:

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

/*[...]*/

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

Pour importer des styles à l'échelle mondiale, ajoutez simplement une instruction d'importation non retour dans le fichier dont vous souhaitez les charger, par exemple:

 import './global.css' ;

/*[...]*/

Pour appliquer la feuille de style générée à une page, vous devrez ajouter une propriété cssPath dans l'objet de données exporté à partir de vos fichiers *.11ty.tsx , par exemple:

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

/*[...]*/

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

Le chemin correspondra au dossier du module respectif, et le nom reflétera celui de votre nom de fichier *.11ty.tsx mais avec une extension CSS.

Hydratation

11Tyby comprend un ensemble dédié à l'application de l'hydratation partielle. Cela fonctionne comme un hoc, enveloppez le composant que vous souhaitez hydrater sur le client. Vous pouvez l'appliquer comme suit:

 import { define } from 'preactement' ;

/*[...]*/

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

/*[...]*/

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

/*[...]*/

export { Form } ;

Il est recommandé de créer des composants dans leur propre dossier et d'appliquer cette fonction dans un fichier index.ts à l'intérieur. De cette façon, vous pouvez séparer les "transformations" que le composant peut avoir besoin à l'exécution avec le composant lui-même, vous pouvez voir un exemple ici.

Une fois que vous avez un composant hydraté, vous devrez l'importer dans un fichier "entrée". Ceux-ci sont suffixés avec .entry , et doivent être placés dans leur dossier de module respectif, par exemple ./src/home/home.entry.ts .

Le fichier d'entrée doit importer vos composants hydratés, par exemple:

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

Ce fichier est ensuite référencé dans votre fichier *.11ty.tsx en les transmettant dans l'objet data exporté à partir de votre composant, par exemple:

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

/*[...]*/

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

Pour un exemple de travail, jetez un œil au module home ici.

Données

Toutes les méthodes officielles de 11ty pour recueillir des données à partir d'une API ou autrement, fonctionneront ici. Il existe de nombreux exemples d'exemples de la façon de procéder dans la documentation officielle de 11ty, y compris l'utilisation de GraphQL: https://www.11ty.dev/docs/data-js/.

Pour définir des données globales , ajoutez des fichiers JSON, JS ou TypeScript dans le dossier ./src/data . Ceux-ci seront ensuite analysés par 11ty et ajoutés via la cascade de données. Vous pouvez y accéder directement dans vos fichiers .11ty.ts* .

Par exemple, si vous deviez ajouter un fichier global.ts à ./src/data , vous y accédez via une propriété global dans votre objet d'argument Pages:

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

/*[...]*/

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

Pour ajouter des données locales, par exemple les données spécifiques à un module, ajoutez un fichier suffixé avec .data dans le dossier du module pertinent. Cela sera alors accessible exactement de la même manière que ci-dessus, mais uniquement pour cette page. Par exemple, si vous avez ajouté home.data.ts à ./src/modules/home , votre fichier Home Page 11ty.tsx aurait accès aux valeurs conservées dans ce fichier de données.

Installation

1. Clone ou télécharger le référentiel

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

2. Installez les dépendances du projet

yarn

Développement

yarn start

Construire une production

yarn build