Coder Social home page Coder Social logo

react18-tools / turborepo-template Goto Github PK

View Code? Open in Web Editor NEW
39.0 2.0 4.0 4.32 MB

Template for creating React 18 / Next.js 14 libraries

Home Page: https://turborepo-template-three.vercel.app/

License: Mozilla Public License 2.0

JavaScript 47.59% TypeScript 31.77% Handlebars 3.13% SCSS 17.51%
nextjs nodejs react reactjs-libraries server-components template tsup turborepo typescript vitest

turborepo-template's Introduction

Turborepo Template

test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

Explore featured packages built with this template.

Exciting news! We've launched a new course to help you master this template: Craft Next Gen UI Libraries for React 18 and Next.js 14

Features

This template offers the following pre-configured features. Additionally, your repository will automatically be rebranded with the help of workflows and post-install scripts.

✅ Monorepo powered by Turborepo and GitHub actions for automating building, testing, and deploying your library

✅ Examples with Next.js, Vite, and Remix to showcase how your library can be utilized (Note: Remix is optional due to instability in monorepo setup and folder imports)

✅ Examples pre-configured for Light/Dark theme based on user preference

✅ Examples ready to be deployed to Vercel

✅ Typedoc setup for automatic documentation generation based on tsdoc comments

✅ Code of Conduct and contributing files, ready for customization

✅ Prettier and linter configured according to modern best practices (Feel free to add your flavor)

✅ Recommended VSCode extensions - Prettier and Kanban board for code formatting and project management directly within your IDE

✅ Powerful code generators - try yarn plop

✅ Test setup with Vitest - A modern and fast testing framework supporting Jest-like APIs

✅ Workflows to automate testing on every pull-request or code push event

✅ Workflow to automatically publish and create GitHub releases when you update your library's package.json file.

✅ Workflow to automatically rebrand the entire template based on your repository name. (Refer TODO.md)

✅ Plus, this readme file includes a quick checklist for configuring Codecov and other badges, setting up your docs website on GitHub pages, and more. See Checklist.

Creates a library that is

✅ Fully Treeshakable (e.g., import {Bars1, Bars2} from react18-loaders/dist/server/bars)

✅ Fully TypeScript Supported

✅ Leverages the power of React 18 Server components

✅ Compatible with all React 18 build systems/tools/frameworks

✅ Documented with Typedoc (Docs)

Getting Started:

This template is based on one of the official Turbo Repo starters but comes with a plethora of additional features specifically designed for developing and publishing JavaScript/TypeScript libraries, especially for React 18.

To get started, simply click on the "Use this template" button to create a new repository based on this template, **update sripts/rebrand.config.json if required, and install dependencies(Will automatically trigger rebrand.js). Customize it according to your requirements for your next JavaScript/TypeScript/React/Next.js library or project.

For detailed instructions and a checklist, please refer to TODO.md.

What's Different from Turborepo official templates?

Compared to the default scaffold from create-turbo, this template offers:

  • Unit tests with vitest
  • Build setup with tsup and esbuild-plugin-react18 that supports React Server components out of the box
  • Automatic file generation
    • Simply run yarn plop and follow the prompts to auto-generate your new component with test files and dependency linking, adhering to best practices automatically
  • GitHub actions/workflows to auto-publish your package when the version changes
  • GitHub action/workflow + pre-install scripts to automatically rebrand your repo on creation

🤩 Don't forget to star this repository!

Looking for a hands-on course to get started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React, and TypeScript

Repo Stats

License

Licensed under the MPL-2.0 open-source license.

Please consider enrolling in our courses or sponsoring our work.


with 💖 by Mayank Kumar Chaudhari

turborepo-template's People

Contributors

deepsource-autofix[bot] avatar mayank1513 avatar turbobot-temp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

turborepo-template's Issues

Color property doesn't work

Upvote & Fund

  • We're using Polar.sh so you can upvote and help fund this issue.
  • We receive the funding once the issue is completed & confirmed by you.
  • Thank you in advance for helping prioritize & fund our backlog.
Fund with Polar

Add support for CSS / SCSS modules.

  1. sass should be added only as a dev dependency.

  2. The final build should produce CSS files following BEM conventions.

    2.1. No hash should be added - to allow library users to use classNames with confidence.
    2.2. In many cases strict BEM convention may not be possible as it will depend on library builders.
    2.3. Treat component folder names as blocks

  3. Multiple CSS files should be created corresponding to each component, as well as the overall CSS file containing styles for all components.

Upvote & Fund

  • We're using Polar.sh so you can upvote and help fund this issue.
  • We receive the funding once the issue is completed & confirmed by you.
  • Thank you in advance for helping prioritize & fund our backlog.
Fund with Polar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.