Baby steps-- vite, jest, typescript all kinda working.
Unfortunately, how they work is something of a mystery. Vite is a bit like Create React App, in that its inner workings are hidden away so that the typical developer doesn't have to spend too much energy thinking about what's going on under the covers. Anyway, we have both a cheesy startup application and a library to test. Next steps include rounding out the RGBtoHSL functions, and making building that as a target library. After that, writing the visualization component AS a component, and then prettying it up. I'm thinking a cheesy neumorphic design.
This commit is contained in:
parent
4951557521
commit
f67503ea58
|
|
@ -0,0 +1,2 @@
|
|||
/node_modules/
|
||||
/dist
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HSL Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<hsl-calculator name="and fuck you"></hsl-calculator>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
moduleFileExtensions: ["js", "ts", "json"],
|
||||
transform: {
|
||||
"^.+\\.ts$": "ts-jest",
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "hsl-calculator",
|
||||
"version": "1.0.0",
|
||||
"description": "A simple translator between RGB, HSL, and HSV",
|
||||
"main": "dist/index.ts",
|
||||
"repository": "https://git.elfsternberg.com/elfsternberg/hsl-calculator",
|
||||
"author": "Elf M. Sternberg <elf.sternberg@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "jest ./src/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^26.0.23",
|
||||
"jest": "^27.0.3",
|
||||
"ts-jest": "^27.0.2",
|
||||
"ts-lit-plugin": "^1.2.1",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.3.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^2.0.0-rc.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { hexToDec } from "./hsltorgb";
|
||||
|
||||
test("Should convert Hex RGB to numeric RGB", () => {
|
||||
expect(hexToDec("ff", "ff", "ff")).toEqual([255, 255, 255]);
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
const hexToDecS = "0123456789ABCDEF";
|
||||
const hexToDecI = (c: string): number =>
|
||||
c
|
||||
.split("")
|
||||
.reverse()
|
||||
.reduce(
|
||||
(acc: number, c: string, i: number) => Math.pow(16, i) * hexToDecS.indexOf(c.toUpperCase()) + acc,
|
||||
0
|
||||
);
|
||||
|
||||
const isHex = new RegExp("^[0-9a-fA-F][0-9a-fA-F]?$");
|
||||
export const hexToDec = (r: string, g: string, b: string) => {
|
||||
if (!(r.match(isHex) && g.match(isHex) && b.match(isHex))) {
|
||||
console.error("hexToDec passed an unrecognizable number.");
|
||||
return null;
|
||||
}
|
||||
return [hexToDecI(r), hexToDecI(g), hexToDecI(b)];
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
@customElement("hsl-calculator")
|
||||
export class HslCalculator extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
border: 1px solid gray;
|
||||
padding: 16px;
|
||||
max-width: 800px;
|
||||
}
|
||||
`;
|
||||
|
||||
@property()
|
||||
name = "World";
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h1>Hello, ${this.name}!</h1>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hsl-calculator": HslCalculator;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"lib": ["DOM", "DOM.Iterable", "esnext"],
|
||||
"types": ["@types/jest"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": false,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineConfig } from "vite";
|
||||
import { resolve } from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: "./",
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: "./dist",
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue