bebbi / bebbi-scripts Goto Github PK

Things that worked in the old babel config and are blockers here:

I have a library that

1. exports a tailwind plugin.
   Its path is src/plugin.js and it looks like this:

const path = require('path')
const plugin = require('tailwindcss/plugin')
const config = require(path.join(__dirname, '../tailwind.config.js'))

module.exports = plugin(function () {}, config)

It's consumed inside the caller's tailwind.config.js, like this:

const path = require('path')

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    path.join(
      path.dirname(require.resolve('@gigmade/msm-design')),
      '**',
      '*.js'  // point 2 here.
    ),
  ],
  plugins: [
    require('@gigmade/msm-design').plugin, // point 1 here!
    require('./src/selection/tailwindPlugin'),
  ],
}

I don't get the plugin.js to be part of the output.
If I try allowJs: true in tsconfig, everything breaks down because that changes the build output structure from dist/cjs/index.js to dist/cjs/src/index.js -> that added src let's callers not find any part of the package.

2. exports a tailwind.config.js , see point 2 comment in the code above.
   But since we have either no tailwind.config.js copied to dist, or (allowJs) the whole structure is broken, this doesn't work.

I believe the solution would be to fix the output on allowJs: true ? Or what else is to be done?

For libs which are in a mono-repo (and do not have a separate git repo, the yarn repo step fails

my-ws/monos/msm-mono/libraries/file-loader$ yarn prepare

husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)

I can understand why it happens. But can it be fixed?

I've tried bebbi-scripts in a react package with also .tsx files, and all cjs, esm, types building errors out with a lot of "Cannot use JSX unless the '--jsx' flag is provided."

Adding a "jsx" key to tsconfig manually is an option too. What do you suggest?

eslint-config-react-app

The situation is, it's still a dependency in msm-nodes, and also it's a dep in bebbi-scripts. But I believe it's not used in bebbi-scripts.

Confirm that eslint-config-kentcdodds doesn't depend on react-app config.
We had a discussion over here where I put in my vote for making react-app config the default config. After this, you've added the package to bebbi-scripts in e178220 but looking at it I believe you haven't made it the default in bebbi-scripts.

What is your idea/proposal there? Possible to go with a flexible set up with react-app as the default?

bebbi-scripts test fails because of npm dependencies.
I fixed the same error for the 'uuid' dependency by bumping it but not all could be bumped.
This appears to be a jest (ts-jest?) specific error and does not occur on bebbi-scripts build.

Error:

/path_to_ws/node_modules/@react-hook/resize-observer/dist/module/index.js:4
import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
^^^^^^

SyntaxError: Cannot use import statement outside a module

  11 |   RefObject,
  12 | } from 'react'
> 13 | import useResizeObserver from '@react-hook/resize-observer'
     | ^
  14 | import useEventCallback from '../../hooks/useEventCallback'
  15 | import { useDebouncedCallback } from 'use-debounce'
  16 | import type { TClientProps } from './DiffIndicator'

  at Runtime.createScriptFromCode (../../node_modules/jest-runner/node_modules/jest-runtime/build/index.js:1495:14)
  at Object.<anonymous> (src/patches/diffIndicator/diffIndicatorContext.tsx:13:1)
  at Object.<anonymous> (src/patches/diffIndicator/DiffIndicator.tsx:1:1)
  at Object.<anonymous> (src/patches/diffIndicator/WithDiffIndicator.tsx:2:1)
  at Object.<anonymous> (src/patches/diffIndicator/index.ts:1:1)
  at Object.<anonymous> (src/patches/index.ts:5:1)
  at Object.<anonymous> (src/withBaseEditor/withGigNode.ts:5:1)
  at Object.<anonymous> (src/withBaseEditor/index.ts:6:1)
  at Object.<anonymous> (src/utils/insertChildGigNode.test.tsx:3:1)

FAIL src/convertNodes/deserializeTree.test.ts
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

https://stackoverflow.com/questions/73203367/jest-syntaxerror-unexpected-token-export-with-uuid-library

1. Confirm ts-jest is not needed?

2. husky: This currently looks needed - do we need to keep it or could we have a bebbi-scripts prepare instead and not worry about installing husky? Let's add some instructions about husky instead if it's not possible..

Say I have a mistake in package.json scripts (file x does not exist):

"build": "bebbi-scripts build && cp x dist/",

and running yarn validate (= "bebbi-scripts validate",)

the banner comes up twice:

[build]  Thanks for using: 
[build]   _          _     _     _                      _       _ 
[build]  | |        | |   | |   (_)                    (_)     | |
[build]  | |__   ___| |__ | |__  _   ___  ___  ___ _ __ _ _ __ | |_ ___ 
[build]  | '_ \ / _ \ '_ \| '_ \| | /__/ / __|/ __| '__| | '_ \| __/ __|
[build]  | |_) |  __/ |_) | |_) | |      \__ \ (__| |  | | |_) | |_\__ \
[build]  |_.__/ \___|_.__/|_.__/|_|      |___/\___|_|  |_| .__/ \__|___/
[build]                                                  | |
[build]                                                  |_|
[build] 
[build] cp: x: No such file or directory
[build] yarn build --no-banner exited with code 1

 Thanks for using: 
  _          _     _     _                      _       _ 
 | |        | |   | |   (_)                    (_)     | |
 | |__   ___| |__ | |__  _   ___  ___  ___ _ __ _ _ __ | |_ ___ 
 | '_ \ / _ \ '_ \| '_ \| | /__/ / __|/ __| '__| | '_ \| __/ __|
 | |_) |  __/ |_) | |_) | |      \__ \ (__| |  | | |_) | |_\__ \
 |_.__/ \___|_.__/|_.__/|_|      |___/\___|_|  |_| .__/ \__|___/
                                                 | |
                                                 |_|

So I'm not sure if what's the deal here:

I'm trying to build a TS lib with some missing/wrong typings which worked in babel, but it aborts with errors.

Is it possible to build or not? Does it build .js? If so, is it ".js yes, bad .ts no"?

Pre-reads

1. See the screenshot for a quick overview of the goal.

2. Listen to the kcd call on packages

3. Have a look at the options referenced there:

• litefs-js
• kcd-scripts

Task

Remove all toolchain aspects of the github.com/bebbi/msm-nodes library and add them to this github.com/bebbi/bebbi-scripts repo instead, to be installed. Make it "publishable" to npm.
Change msm-nodes to consume this lib.
(I will then either publish it to npm later or we'll use it in a shared yarn workspace.)

How

I think the options are:
Option 1: Using a typescript only set-up like in litefs-js

• I think that's the best option nowadays?
• But I need to be able to run it on some old js code too before all is migrated. Maybe this is relevant?

Option 2: Keep the current lib's config (babel for transpile, tsc for types) like in kcd-scripts

• As a fallback option?
• Easiest could be to import kcd-scripts in bebbi-script and then use it with an adjusted eslint config?
• Or "copy-paste" the lib with small changes
• Btw, resulting scripts should be consumable in yarn workspaces, so we should probably avoid referencing paths like ./node_modules in configs

Features

eslint

I'd like to stick to the customized react-app config. So, for eslint, need ability to replace lib config

"eslintConfig": {
  "extends": "react-app",
  "rules": {
    "import/no-extraneous-dependencies": 2
  }
},

with

"eslintConfig": {
  "extends": "bebbi-scripts",
},

building

Add a watch mode to auto-build both code and types

Test

Replace old scripts referencing react-scripts

"test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"

with

"test": "bebbi-scripts test"

and remove react-scripts dependency

Others

• We don't need to add bundling
• Keep it esm as-is, no change to cjs
• Required scripts: build (incl types), format, test, watch mode for build, format on pre-commit.
• Optional: lint, validate, typecheck
• Like kcd-scripts, we should maintain the ability to provide a custom tsconfig
  • no need for customized eslint rules though

I've failed with all kinds of tsconfig.json extension based on this:

{
  "extends": "bebbi-scripts/extend.tsconfig.json",
  "compilerOptions": {
    // stuff here is ignored
  }
}

and after failing to find a file 'extend.tsconfig.json' in bebbi-scripts, I am thinking the correct syntax is

{
  "extends": "bebbi-scripts/tsconfig.json",
  "compilerOptions": {
    // stuff here is OK
  }
}

which I have verified works.

Can you verify and fix the filename or the doc in README?

AFAICS yarn build adds things to dist, does not replace old files. This could create confusion.

yarn bebbi-scripts build types
Running bebbi-scripts build, Please wait...
info: Processing complete, without errors
[types] ../bebbi-scripts/dist/config/7572b19822de520229eb3beb85e71a4d/types/tsconfig.json(4,232): error TS5053: Option 'emitDeclarationOnly' cannot be specified with option 'noEmit'.
[types] /path_to_ws/node_modules/typescript/bin/tsc --baseUrl 7572b19822de520229eb3beb85e71a4d --project /path_to_ws/libraries/bebbi-scripts/dist/config/7572b19822de520229eb3beb85e71a4d/types/tsconfig.json exited with code 2

Thanks for using: