Add typescript into the project

[voxelias]

This PR:

• Adds typescript to the project
• Turns index.js into index.ts and add types necessary to run the module
• Adds possibility to import css into typescript modules
• Makes no functional changes

What to test:

1. Build project
2. Deploy target static files onto a printer
3. Make sure UI works

[ddx32]

Those can remain devDependencies ;)

[voxelias]

sure

[ddx32]

Just going through some errors my IDE is throwing. This would be required for TypeScript to be happy with dynamic imports, file resolutions and recent features like Object.values

Suggested change

	"target": "es5",
	"target": "ES2017",
	"module": "esnext",
	"moduleResolution": "node",

[voxelias]

I had no complains, but I've changed the config

[ddx32]

Perhaps add @types/node so we can get typehints on things like process.env.UPDATE_INTERVAL etc?

[voxelias]

sure

[ddx32]

It would be ideal to avoid type casting here, but that would require broader rethinking and refactoring of the way apiRequests variable is constructed.

Also, the shouldGet method now seems to be mixing up number and Date data types when performing operations on the timestamp key of the ApiRequest object.

[ddx32]

This could be one of the ways of slight refactoring that would retain type safety (and help correct the errors in the Date/number types that Typescript unveiled).

I did not test this! Use as a pointer only 😉

Merge the ApiRequest/Requests data types:

type RequestType = 'printer' | 'profiles' | 'job' | 'connection';

interface ApiRequest {
  type: RequestType,
  get: () => Promise<any>,
  init: boolean,
  update: boolean,
  updateInterval?: number,
  timestamp?: Date,
}

Change the requests object into an array:

const requests: ApiRequest[] = [
  {
    type: 'printer',
    get: () => getJson("/api/printer"),
    init: true,
    update: true,
  },
  {
    // NOTE: I leave it like this until we change the API
    type: 'profiles',
    get: () =>
      process.env.PRINTER_TYPE === "sla"
        ? getJson("/api/printerprofiles")
        : new Promise((resolve) => resolve({})),
    init: true,
    update: false,
  },

  // ...etc

]

Simplify the getRequests function to work with the above array directly. This way the IDE/compiler should pick up the types correctly and will highlight the type errors in the timestamp handling bits:

async function getRequests(initialized) {
  const timestamp = new Date().getTime();
  const apiRequests = requests.map((request) => {
    const shouldGet = () => {
      if (!initialized) return request.init;

      if (request.update) {
        if (!request.updateInterval) return true;
        if (!request.timestamp)
          request.timestamp = timestamp + request.updateInterval;
        if (timestamp >= request.timestamp) {
          request.timestamp = timestamp + request.updateInterval;
          return true;
        }
      }
    };
    return shouldGet() ? request.get() : undefined;
  })

  const responses = await Promise.all(
    apiRequests.map((request) =>
      request
        .then((payload) => ({ ok: true, payload }))
        .catch((error) => ({ ok: error.code ? false : null, error }))
    )
  );
  const result = Object.fromEntries(
    Object.entries(apiRequests).map(([key], i) => [key, responses[i]])
  );
  return result;
}

[voxelias]

I've rewritten the whole code. At the point I was writing it, I wanted to have it as simple as possible. With V1 API it makes more sense of course. So I've added there also a module for API with types.