TypeScript Rewrite #42

- adds a Dev CJS build, an ESM build, and some inferred typings - and has a similar Prod minified CJS build, which was the only build we had previously - no need for webpack production config anymore as TSDX handles that - add a tsconfig instead, in particular, ensure allowJs and esModuleInterop are true - switch .babelrc to .babelrc.js as TSDX is using Babel 7 everywhere - use TSDX's built-in babel config plus preset-react (deps): add TSDX and @babel/preset-react to support it - will begin removing deps in the next commit as other parts of the dev env are replaced by TSDX

- replace standard with eslint and all eslint-config-standard etc - hopefully tsdx lint should be more compatible with editors, tools, TS, etc than standard, because it gave lots of issues - lots of things, esp. integrations, are pretty unmaintained in standard's ecosystem :( - add react-app and prettier from tsdx lint --write-file so editors etc will be able to have the same config as TSDX internally - have to turn off prettier as double quotes and semicolons conflict with standard - fix lint errors in the example code (deps): add eslint-config-standard and all its peerDeps (deps): add eslint-plugin-react as tsdx lint will error without it

@24

- TSDX changes some of Jest's defaults and so causes some issues for JS/JSX support - by default Jest supports JS and JSX in testMatch and babel-jest is automatically run on JS/JSX files if a babelrc is found - also had to configure class-properties for Babel as while it's automatically included with tsdx build, no Babel transforms are included with tsdx test (yet) (deps): remove jest as it's a dep of TSDX (deps): remove babel-jest@23 since we can use @24 now - which is a dep of jest@24 - remove require.resolve from it as it causes errors due to not being a direct dependency

- finally nix webpack@1 and babel@6 from the codebase - remove babel@6 presets, add @babel/core@7 - remove webpack loaders, parcel has built-in support for most - needed to add postcss-modules and a postcss.config.js to support the example's use of CSS modules - also fix a bunch of security warnings in the process - restructure example file hierarchy to be closer to CRA's for better standardization

- make heavy use of the multiple iterations on types in others' PRs, my own iterations on that, and then @types/react-signature-canvas - credit where credit is due! - NOTE: the naming of the props type and the class type do not include the word "React" unlike @types/react-signature-canvas - it is convention in React components to leave it out and you're already importing from a package with "react" in its name - refactor init logic a bit to get around `| null` everywhere - kinda hacky but better than ifs or ! (non-nullable) everywhere - use ! for canvas.getContext('2d') calls for same reason - c.f. microsoft/TypeScript#19229 - refactor naming everywhere to src/index.tsx - configure tsconfig -- no need for allowJs anymore, but jsx needs to be set as TS is actually reading it now - configure jest -- ts-jest needed to read TSX files (deps): add DT typings for prop-types, react, and signature_pad (deps): add a declaration file for trim-canvas as it doesn't have types built-in yet (TODO for me!) - use typings/ to hold external declarations

- not much to change except for some code to cast things to correct types - remove file extensions from TS imports as TS errors on them - configure .ts for ts-jest, and remove testMatch as we only have .spec.tsx? extensions now - leave out test/config/ set-up files as I'd like to split those out into separate packages anyway and their types aren't really necessary for test correctness (deps): add @types/enzyme for more explicit typings of tests

- for this commit, just focus on configuration and formatting errors, stricter typings will be in next commits - add tsconfig.eslint.json so that test/ files are linted too

- reuse React.Component types where possible, just like with the SignaturePad types

- use TS 3.0 defaultProps support so that clearOnResize doesn't have to be optional - ignore consistent-type-assertions and no-non-null-assertion in places where those hacks were intentionally used for simplicity's sake - fix some strict-boolean-expressions by checking for types explicitly or using nullish coalescing - nullish coalescing on canvasProps isn't breaking because it already had PropTypes.object defined - nullish coalescing on DPR isn't breaking because it should be a number (or undefined), and shouldn't be 0 - and even if it were 0, it would've been set to 1 before anyway bc of the Math.max - ignore several strict-boolean-expressions in _resizeCanvas because checking for undefined specifically is a breaking change - 0, '', null, etc falsey width/height was still resized previously, so if we check for undefined instead, it will stop resizing falseys - 0, '', null, etc don't make a lot of sense to set a width/height, if these were used it may have been accidental or for some temporary hack - accidental would be a bug, so will consider a fix, but fixing that bug would still be breaking :/ :/

- previously falsey values like 0, '', null, etc would have been resized, even though something like 0 _did_ set a fixed width/height - this could be considered breaking, so might leave out or revert this commit - and setting it to falsey may have intended it to be resized, bc setting it to 0 etc doesn't really make sense... but idk people can set whatever

- modify setRef to actually set internal refs to null if unmounted - modify getCanvas() and getSignaturePad() to throw errors if the ref is currently null - use both methods internally instead of directly accessing their respective variables - make some alias variables for brevity where possible - add a test for the error case as well

- we made it! woot! 🎉🎉

- because './src' is actually being used as the rootDir (deps): I deprecated this buggy option in TSDX but my PR has yet to be released - it outputs a warning in newer versions but no harm and only benefit in upgrading earlier

- I've been away from OSS for a while due to abuse and toxicity and no one's maintained TSDX in my time away, so lots of things are dated now - and TSDX was a large source of the above as well - and this library doesn't need everything TSDX provides -- most don't - use my boilerplate from https://github.com/agilgur5/ts-library-base - babel.config.js is basically a duplicate plus preset-react - tsconfig.json is dupe plus more excludes - tsconfig.build.json is dupe plus typings dir (and tsx ext for index) - jest.config.ts is dupe plus jsdom, enzyme, window-resizeto - rollup.config.ts is dupe minus CJS build and with some custom naming - similar for package.json#main,module,source,exports - fix: previously #main was changed to CJS, which could be considered breaking since it's currently UMD -- back to UMD now - package.json#scripts is a dupe plus lint and start - deps: add rollup, rollup-plugin-typescript2 for the config - deps: add @rollup/plugin-node-resolve, @rollup/plugin-commonjs, @rollup/plugin-babel, and rollup-plugin-terser for the build - and package-json-type and @babel/preset-typescript for typings - and @babel/runtime and @babel/plugin-transform-runtime for reusing Babel's runtime helpers instead of duplicating them - deps: add jest, jest-config, @jest/globals, @jest/types, ts-node for testing - RIP my jest-without-globals library - deps: add concurrently for parallel script execution - deps: add @tsconfig/strictest to extend tsconfig from - deps: add TS ofc - ci: add type-checking to before script check - ci: upgrade to Node 12 as oldest LTS - typings: improve typings with newer TS and stricter tsconfig - required `override` and required `import type` - fix(typings): move @types/react and @types/prop-types to deps - these are imported by the `.d.ts` declaration and even the DT lib: https://www.npmjs.com/package/@types/react-signature-canvas - deps: upgrade to lockfile v2 that is auto-used with NPM v8 - deps: upgrade @babel/core and @babel/preset-react to latest minor - and add @babel/preset-env as a direct devDep too - should upgrade compat-table etc and might as well do so to match minors of other babel deps and while changing so many deps anyway - deps: switch from eslint-config-standard-with-typescript to ts-standard - I didn't know this was a thing! standard-with-typescript was a relatively recent development in and of itself - should have used this from the beginning! - replaced all eslint deps with this one dep now - ignore the example dir for now as it errors (parsing?) and a line in the babel config as well (possibly due to old ESLint)

- deps: remove postcss-modules as Parcel no longer needs it - this also fixes 20+ vulns in the devDeps - use a namespace import for the CSS modules as requested in the docs: https://parceljs.org/languages/css/#css-modules - Per Migration docs (https://parceljs.org/getting-started/migration/): - use `type='module'` in `<script>` tag - use `.parcel-cache` in gitignore instead of `.cache` - misc: Babel is no longer necessary, so might move Parcel into the example dir instead, as it doesn't have to share deps now? - getting warnings from Parcel now that the Babel config is a deopt, but that's being used by Rollup (also still very fast) - misc: add `--open` to Parcel CLI script so it opens in browser window automatically

- fancy source maps for declarations - apparently I left these out of `ts-library-base` so they didn't get copied here either - but most of my tsconfig there was copied too, so I suspect I left it out either because of @wessberg/rollup-plugin-ts's bugs with it or because TSDX previously had bugs with it - c.f. ezolenko/rollup-plugin-typescript2#221 and the worse downstream version I had written first: jaredpalmer/tsdx#488 - Unfortunately I did encounter a small error with declaration maps when using rpts2 as a configPlugin, due to an unexpected edge case in code I wrote myself in the above PR - wrote up an issue for it and will probably PR it myself too: ezolenko/rollup-plugin-typescript2#310 - as a workaround, I wrote a small `tsconfig.rollup.json` to be used with rpts2 as a configPlugin that disables `declarationMap` - and also adds some optimizations over my base tsconfig - took me a bit to figure out how to use options with configPlugins, as that was one of the reasons I didn't use @rollup/plugin-babel as the configPlugin - I still can't get it to read my `babel.config.js` even with options as it has no option for this (it auto-detects it) :/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeScript Rewrite #42

TypeScript Rewrite #42

Commits on Apr 20, 2022