webdev-essentials - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "webdev-essentials",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A collection of code-snippets and useful info essential for web development.",
-  "main": "index.js",
   "scripts": {
-    "start": "npm run index.js"
+    "build": "tsc",
+    "build:check": "tsc --noEmit"
   },
@@ -14,3 +14,12 @@ "repository": {
   "author": "Hans Krebs",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^17.0.24",
+    "typescript": "^4.4.3"
+  },
+  "main": "dist/index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "react": "^17.0.2"
+  }
 }

README.md

@@ -30,1 +30,77 @@ # Description
 [Reference](https://benjaminwfox.com/blog/tech/why-isnt-npm-link-working)
+
+## Publishing a TypeScript package to NPM
+
+- init new `npm`-package: `npm init -y`
+- install TypeScript-compiler: `npm i typescript --save-dev`
+- init TypeScript: `npx tsc --init`
+- add two scripts to `package.json`:
+
+  - the `build`-script compiles all the files, whereas the `build:check` command only checks compileability without actually compiling and creating the js-files.
+
+  ```json
+  "scripts": {
+      "build": "tsc",
+      "build:check": "tsc --noEmit"
+    },
+  ```
+
+- Add `"declaration": true` to the `compilerOptions` of your `tsconfig.json`. This tells TypeScript to emit an `.d.ts` definitions file along with your compiled JavaScript.
+- Add `"types": "index.d.ts"` to your `package.json`. When other people import your library, this tells the TypeScript compiler where to look for your library’s types. The filename of your `.d.ts` file will be the same as your main entry point. So, for example in your `package.json` you’ll want to have something like this in there:
+
+  - Add
+
+  ```json
+    "main": "dist/index.js",
+    "types": "index.d.ts"
+  ```
+
+- Set `outDir` in `tsconfig.jsin` to `"outDir": "./dist"`. This specifies an output folder for all emitted files.
+- `.gitignore` and `.npmignore`
+  - We don’t want to track compiled JavaScript files in our git repository, so add `dist` to the `.gitignore` file.
+  - We do, however, want them sent to NPM when we publish, so create an empty `.npmignore` file (maybe add `/node_modules` there, or simply make it a copy of your `.gitignore` file just without the ignore for the `dist` folder).
+  - If you don’t have an `.npmignore`, NPM will automatically exclude gitignored files from being published. Having an npmignore file overwrites this behavior.
+- Add `"exclude"` object, if you want to exclude folders from the compilation process:
+
+  ```json
+  {
+    "compilerOptions": {
+      "target": "es5",
+      "module": "commonjs",
+      "lib": ["es2017", "es7", "es6", "dom"],
+      "declaration": true,
+      "outDir": "dist",
+      "strict": true,
+      "esModuleInterop": true
+    },
+    "exclude": ["node_modules", "dist", "utils/userLanguage.ts"]
+  }
+  ```
+
+- To locally generate a tarball of everything that will get sent to and published on NPM to really verify and make sure it matches your expectation: `npm pack`
+- To locally test
+  - in you package root: `npm link`
+  - in other project: `npm link <yourpackagename>` and in code `import <yourpackagename>`
+  - to unlink from the other project: `npm unlink --no-save <yourpackagename>`
+
+[Source: The 30-second guide to publishing a TypeScript package to NPM](https://cameronnokes.com/blog/the-30-second-guide-to-publishing-a-typescript-package-to-npm/)
+
+## Rest in TypeScript
+
+- Example-Interface-Definition:
+
+```ts
+interface Options {
+  timeout?: number;
+  [rest: string]: any;
+}
+```
+
+- Here, `[rest:string]: any` defines an `index-structure` of `string`-`keys`
+
+  - all keys give access to any-type members
+  - access to members: options.foo, options.bar, ...
+  - With the `spread`-operator: `fetch(url, ...options);` or const `{ timeout, ...rest} = options;`
+
+- On the contrary, `rest: any[];` defines an `array` named 'rest'
+  - access to members: `options.rest[0];` or `options.rest[1];`

utils/fetchWithTimeout.ts

@@ -1,6 +0,8 @@
-export default async function fetchWithTimeout(
-  url,
-  options?: { timeout?: number }
-) {
-  const { timeout = 8000 } = options;
+interface Options {
+  timeout?: number;
+  [rest: string]: any;
+}
+
+export default async function fetchWithTimeout(url: string, options?: Options) {
+  const timeout = options ? options.timeout : 8000;
   const controller = new AbortController();
@@ -7,0 +9,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40032

increased by119.38%

Number of package files

33

increased by37.5%

Lines of code

713

increased by64.67%

Number of lines in readme file

106

increased by253.33%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact@^17.0.2

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedreact@17.0.2(transitive)