GithubHelp home page GithubHelp logo

schuchard / schematic-starter Goto Github PK

View Code? Open in Web Editor NEW
18.0 3.0 3.0 3.22 MB

Build Angular Schematics with visual diffs

Home Page: https://www.kevinschuchard.com/blog/2018-11-20-schematic-sandbox/

JavaScript 15.86% TypeScript 70.93% HTML 12.52% CSS 0.69%

schematic-starter's Introduction

Schematics Starter with Sandbox

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

More info on this sandbox approach is detailed in this blog post kevinschuchard.com/blog/2018-11-20-schematic-sandbox/

Branches

master

contains the necessary scripts to build & publish a schematic

component-license

example schematic that uses the Angular Component Schematic to generate a new component similar to ng generate component NAME. Also adds a license to each Typescript file with name provided by the CLI prompts. I have an article on CLI prompts here.

Getting started

Yarn is required for the scripts. Make sure it's installed on your machine. If you'd like to use NPM, update the package.json scripts from yarn to npm run and the link command from yarn to npm.

Install the dependencies for the schematic and the sandbox application

yarn && cd sandbox && yarn && cd ..

🖇 Link the schematic in the sandbox to run locally

yarn link:schematic

🏃 Run the schematic

yarn dev
# or
yarn build:clean:launch

To execute an example schematic, make sure you've ran the Install and Link steps above. Then run the following and inspect the changed files.

git checkout component-license && yarn dev

E2E testing

Execute the schematic against the sandbox. Then run linting, unit & e2e tests and a prod build in the sandbox.

yarn test

Unit Testing

Run the unit tests using Jasmine as a runner and test framework.

yarn test:unit

Reset the sandbox

Running the schematic locally makes file system changes. The sandbox is version controlled so that viewing a diff of the changes is trivial. After the schematic has run locally, reset the sandbox with the following.

yarn clean

Note: if you're using the schematics CLI mentioned below, you can execute the schematic in a dry run mode.

Change the Schematic name

  1. do a global search and replace for schematic-starter and schematicStarter with the new name.
  2. change the folder name from ./src/schematic-starter/... to ./src/NEW_NAME/...
  3. run yarn link:schematic to set up local package linking for the sandbox

Optional - Testing with the Schematics CLI

To test locally, install @angular-devkit/schematics-cli globally and use the schematics command line tool. That tool acts the same as the generate command of the Angular CLI but also has a debug mode.

Check the documentation with

schematics --help

Publishing

The publish package.json script is setup to build the schematic. Additional testing scripts could be added to ensure stable releases.

Before publishing:

  • change the package.json name value
  • if using a scope package name (@username/package-name), ensure the following is in your package.json.
{
  "name": "@username/package-name",
  "publishConfig": {
    "access": "public"
  }
}

schematic-starter's People

Contributors

schuchard avatar dependabot[bot] avatar

Stargazers

 avatar Diego Julião avatar Milad Vafaeifard avatar Chase Gibbons avatar Tamilmozhi Gunasekar avatar Muhannad Assaf avatar Josh Sommer avatar beeman avatar Leo Caseiro avatar Tobi avatar Alexander Kastil avatar Leonardo Ruhland avatar Wilmer Rojas avatar Felix Lemke avatar Denis Obydennykh avatar hangxun avatar Alvaro Camillo Neto avatar Vitalii Bobrov avatar

Watchers

Tamilmozhi Gunasekar avatar James Cloos avatar  avatar

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.