2020.5.3-2020.5.9

Opened a new hole, the front-end weekly, collecting, strong recommend fun fantastic front open source projects, including the React/presents/GraphQL/Node/engineering/CICD/finance/and so on related content (actually, that is, during the week I just see the stuff HHH, Each issue contains no more than 10 projects, all of which I will try briefly before writing my own comments.

  • GitHub repository address

content

Projects included in this issue: 7

This issue covers project categories: engineering, GraphQL, NodeJS, and others

engineering

  • rome

    A new front-end toolchain, the intent of the development team is to consolidate the capabilities of the current front-end that are scattered across different libraries: compile, build, format, code specification, and unit testing. And rather than simply integrating, it doesn’t build on existing tools like Babel, ESLint, Webpack, etc. Rome’s idea is to start from scratch. In fact, the Rome library has no dependencies… Not one. The author has implemented a lot of basic libraries from scratch, such as formatter, HTML-parser, JS AST, etc.

I don’t think it’s going to shake Babel or ESLint until it brings a new development experience to ships like Vite or Snowpack.

The current development progress only seems to be towards Linter capabilities for JS/TS, which seems to be a long way off.

  • @nrwl/nx

    It took me five minutes to find a definition for NX: Angular workflow + Monorepo + plugin architecture + development tool suite +… . You can comfortably develop your own projects of various sizes in the NX workspace using monorepo with a variety of built-in development servers, build capabilities, Lint, single test, E2E, etc.

    If you haven’t used Angular workflows, I’ll cover them here. It consists of two main parts: Schematic and Builder.

    • Schematic: Better understood as a generator, it can quickly generate part of the code in a project, i.eng generate component CompANest has a similar scaffold command.
    • Builder: or executor. The serve/dev/start/build command in our normal project is executor.

    Nx also implements a set of Angular workflows, called generator and Executor in Nx (Nx also supports Angular schematic and Builder).

    As for plug-in system, the ability of nx itself does not contain the framework, it can support the React/presents/Nest/Next/Gatsby/Express application running, these abilities come from official plugin:

    This means that if you are using an unsupported framework, you can implement one yourself, such as the community’s Vue, Electron plugin, and the ESBuild, Vite plugin I’m working on.

    Nx is expected to be one of the projects I spend the most energy on in 2021, because it’s really, really good fun, I wrote my own scaffolding a long time ago with this idea (much more stupid of course), multiple templates, built in development build capability, but it’s a hassle to do it myself… Thank you so much for nx.

  • ts-morph

    The packaging of the TypeScript compiler API makes it much easier to use. Imperative use (jscodeshift is also in this category, babel-traverse is Visitor mode). The code looks something like this:

    import {
      Project,
      StructureKind,
      ExportDeclarationStructure,
      OptionalKind,
    } from 'ts-morph';
    
    const project = new Project();
    
    const sourceFile = project.createSourceFile(path, content, {
      overwrite: true});const exportDeclaration: OptionalKind<ExportDeclarationStructure> = {
      kind: StructureKind.ExportDeclaration,
      isTypeOnly: false.moduleSpecifier: `. /${directory}/${fileName}`}; sourceFile.addExportDeclaration(exportDeclaration);Copy the code

    This code adds an import of export * from “./dir/file” to the source file.

    Overall it lowers the bar for a lot of AST operations, but the documentation is still being refined, and you’ll probably need to try each of the methods that sound like it yourself.

GraphQL

  • graphql-rate-limit

    The GraphQL version of Rate-Limit implements most of the capabilities, including the release policy and storage based on Redis, PM2, MongoDB, MySQL, etc. Its implementation is based on GraphQL Directive, and I have written about this concept before, but considering the small audience there is no way to see the GraphQL Directives that you don’t know.

NodeJS

  • execa

    The most enhanced version of Child_process is too powerful to finish, so I’ll just say a few words about it.

    • Better Windows support! On Windows, if the child process is not specifiedshellIs true, usually at the end of the command.cmdSuffixes, but may bring new problems…
    • Easier apis, such as the Promise interface and error handling, STDIN/STdout handling, preventing unexpected inventory of processes, etc.
    • Look at the document for more information.
  • npm-run-path

    And the one above is an author. I haven’t counted how many libraries this author has, but you’ve probably used them…

    We all know that NPM script temporarily adds commands from the node_modules/bin directory in the project directory to the environment variable process.env.path. If you’re writing scripts for your project and want to use locally installed modules, If you don’t want to use./node_modules/bin/command, you can use npm-run-path to add locally installed modules to environment variables. Such as:

    // Official example
    const childProcess = require('child_process');
    const npmRunPath = require('npm-run-path');
    
    // `foo` is a locally installed binary
    childProcess.execFileSync('foo', {
    	env: npmRunPath.env()
    });
    Copy the code

    Alternatively, if you use execa instead of the native child_process module, you can use preferLocal directly from execa to use a locally installed module.

other

  • vite-plugin-mix

    Domestic open source behemoth egoist works, such as the authors of Execa and NPM-run-Path, have a lot of high-quality and short libraries.

    This is an interesting Vite plugin that allows you to develop both front and back end applications (but not in the case of Blitz, Midway Hooks). For example, access /login is the front end page, access/API /login is the back end interface, like NextJS API Routs.

    It was interesting to me because the README of this project included examples of Apollo-GraphQL and Vercel, which made me think of a whole example of Vite + Apollo + Vercel Functions.

    Here’s an example from the official website:

    // vite.config.ts
    import { defineConfig } from 'vite'
    import mix from 'vite-plugin-mix'
    
    export default defineConfig({
      plugins: [
        mix({
          handler: './handler.ts',})]})// handler.ts
    import type { Handler } from 'vite-plugin-mix'
    
    export const handler: Handler = (req, res, next) = > {
      if (req.path === '/hello') {
        return res.end('hello')
      }
      next()
    }
    Copy the code

    You can use any library that implements this interface in handler, such as Nest, Express, Apollo, etc. (although Nest Apollo has express-based implementations).

    Personally, I feel this hybrid mode is still quite fun ~

That’s it for this issue, and I’ll see you next time