mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
Merge branch 'main' into forms-control-value-accessor
This commit is contained in:
Laforge Thomas
11
.github/workflows/close-inactive-pr.yml
vendored
11
.github/workflows/close-inactive-pr.yml
vendored
@@ -13,10 +13,13 @@ jobs:
|
||||
- uses: actions/stale@v5
|
||||
with:
|
||||
days-before-issue-stale: 20
|
||||
days-before-issue-close: 14
|
||||
days-before-issue-close: -1
|
||||
stale-issue-label: 'stale'
|
||||
stale-issue-message: 'This issue is stale because it has been open for 20 days with no activity.'
|
||||
close-issue-message: 'This issue was closed because it has been inactive for 14 days since being marked as stale.'
|
||||
days-before-pr-stale: -1
|
||||
days-before-pr-close: -1
|
||||
days-before-pr-stale: 20
|
||||
days-before-pr-close: 7
|
||||
stale-pr-label: 'stale'
|
||||
stale-pr-message: 'This pull request is stale because it has been open for 20 days with no activity.'
|
||||
close-pr-message: 'This pull request was closed because it has been inactive for 7 days since being marked as stale.'
|
||||
only-pr-labels: 'answer'
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"bracketSameLine": true
|
||||
"bracketSameLine": true,
|
||||
"htmlWhitespaceSensitivity": "ignore",
|
||||
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
|
||||
}
|
||||
|
||||
19
apps/performance/christmas-web-worker/.eslintrc.json
Normal file
19
apps/performance/christmas-web-worker/.eslintrc.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": ["../../../.eslintrc.json"],
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts"],
|
||||
"extends": [
|
||||
"plugin:@nx/angular",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.html"],
|
||||
"extends": ["plugin:@nx/angular-template"],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
13
apps/performance/christmas-web-worker/README.md
Normal file
13
apps/performance/christmas-web-worker/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# Web workers
|
||||
|
||||
> Author: Thomas Laforge
|
||||
|
||||
### Run Application
|
||||
|
||||
```bash
|
||||
npx nx serve performance-christmas-web-worker
|
||||
```
|
||||
|
||||
### Documentation and Instruction
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/performance/40-christmas-web-worker/).
|
||||
79
apps/performance/christmas-web-worker/project.json
Normal file
79
apps/performance/christmas-web-worker/project.json
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"name": "performance-christmas-web-worker",
|
||||
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"sourceRoot": "apps/performance/christmas-web-worker/src",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular-devkit/build-angular:application",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/apps/performance/christmas-web-worker",
|
||||
"index": "apps/performance/christmas-web-worker/src/index.html",
|
||||
"browser": "apps/performance/christmas-web-worker/src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "apps/performance/christmas-web-worker/tsconfig.app.json",
|
||||
"assets": [
|
||||
"apps/performance/christmas-web-worker/src/favicon.ico",
|
||||
"apps/performance/christmas-web-worker/src/assets"
|
||||
],
|
||||
"styles": ["apps/performance/christmas-web-worker/src/styles.scss"],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "performance-christmas-web-worker:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "performance-christmas-web-worker:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"executor": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "performance-christmas-web-worker:build"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint",
|
||||
"outputs": ["{options.outputFile}"],
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"apps/performance/christmas-web-worker/**/*.ts",
|
||||
"apps/performance/christmas-web-worker/**/*.html"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { HeavyCalculationService } from './heavy-calculation.service';
|
||||
import { UnknownPersonComponent } from './unknown-person/unknown-person.component';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [CommonModule, UnknownPersonComponent],
|
||||
providers: [HeavyCalculationService],
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<unknown-person [step]="loadingPercentage()" class="relative grow" />
|
||||
<button
|
||||
class="border border-white rounded-md px-4 py-2 text-white w-fit self-center text-2xl my-3"
|
||||
(click)="discover()">
|
||||
Discover
|
||||
</button>
|
||||
<div class="text-white p-1">Progress: {{ loadingPercentage() }}%</div>
|
||||
`,
|
||||
host: {
|
||||
class: `flex flex-col h-screen w-screen bg-[#1f75c0]`,
|
||||
},
|
||||
})
|
||||
export class AppComponent {
|
||||
private heavyCalculationService = inject(HeavyCalculationService);
|
||||
|
||||
readonly loadingPercentage = this.heavyCalculationService.loadingPercentage;
|
||||
|
||||
discover() {
|
||||
this.heavyCalculationService.startLoading();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Injectable, computed, signal } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class HeavyCalculationService {
|
||||
private finalLength = 664579;
|
||||
private loadingLength = signal(0);
|
||||
|
||||
loadingPercentage = computed(
|
||||
() => (this.loadingLength() * 100) / this.finalLength
|
||||
);
|
||||
|
||||
startLoading() {
|
||||
this.randomHeavyCalculalationFunction();
|
||||
}
|
||||
|
||||
private randomHeavyCalculalationFunction() {
|
||||
for (let num = 2; num <= 10000000; num++) {
|
||||
let randomFlag = true;
|
||||
for (let i = 2; i <= Math.sqrt(num); i++) {
|
||||
if (num % i === 0) {
|
||||
randomFlag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (randomFlag) {
|
||||
this.loadingLength.update((l) => l + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background-color: #fff2c8;
|
||||
}
|
||||
.container {
|
||||
width: 380px;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.container *:before,
|
||||
.container *:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
.santa {
|
||||
height: 220px;
|
||||
width: 200px;
|
||||
background-color: #e84701;
|
||||
border-radius: 80px;
|
||||
position: absolute;
|
||||
left: 115px;
|
||||
top: 200px;
|
||||
}
|
||||
.santa:before,
|
||||
.santa:after {
|
||||
width: 40px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff2c8;
|
||||
}
|
||||
.santa:before {
|
||||
height: 130px;
|
||||
}
|
||||
.santa:after {
|
||||
height: 40px;
|
||||
bottom: -15px;
|
||||
}
|
||||
.hand-l {
|
||||
background-color: #e84701;
|
||||
height: 90px;
|
||||
width: 105px;
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: 20px;
|
||||
border-radius: 0 80px 0 0;
|
||||
}
|
||||
.hand-l:before {
|
||||
margin: auto;
|
||||
width: 35px;
|
||||
height: 15px;
|
||||
background-color: #ffffff;
|
||||
top: 85px;
|
||||
left: 71px;
|
||||
}
|
||||
.hand-l:after {
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
background-color: #fad2af;
|
||||
left: 74px;
|
||||
top: 101px;
|
||||
border-radius: 0 0 30px 30px;
|
||||
}
|
||||
.hand-r {
|
||||
height: 150px;
|
||||
width: 180px;
|
||||
border: 30px solid transparent;
|
||||
border-bottom: 40px solid #e84701;
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
bottom: 150px;
|
||||
border-radius: 50%;
|
||||
animation: wave 1.5s infinite;
|
||||
transform-origin: right;
|
||||
}
|
||||
@keyframes wave {
|
||||
50% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
}
|
||||
.hand-r:before {
|
||||
width: 35px;
|
||||
height: 15px;
|
||||
background-color: #ffffff;
|
||||
transform: rotate(-50deg);
|
||||
top: 68px;
|
||||
left: -22px;
|
||||
}
|
||||
.hand-r:after {
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: #fad2af;
|
||||
transform: rotate(-50deg);
|
||||
left: -31px;
|
||||
top: 58px;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
.face {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
background-color: #fad2af;
|
||||
border: 25px solid #f2e6da;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 140px;
|
||||
}
|
||||
.beard {
|
||||
position: absolute;
|
||||
height: 90px;
|
||||
width: 180px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 0 90px 90px;
|
||||
right: -25px;
|
||||
bottom: -25px;
|
||||
}
|
||||
.beard:before {
|
||||
width: 55px;
|
||||
height: 25px;
|
||||
background-color: #f2e6da;
|
||||
border-radius: 20px 0;
|
||||
left: 34px;
|
||||
}
|
||||
.beard:after {
|
||||
height: 25px;
|
||||
width: 55px;
|
||||
background-color: #f2e6da;
|
||||
border-radius: 0 20px;
|
||||
right: 34px;
|
||||
}
|
||||
.eyes {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-color: #0078ca;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
box-shadow: 38px 0 #0078ca, 19px 20px #f69697;
|
||||
}
|
||||
.eyes:before {
|
||||
height: 12px;
|
||||
width: 25px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px 0;
|
||||
left: -10px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.eyes:after {
|
||||
height: 12px;
|
||||
width: 25px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 10px;
|
||||
left: 32px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.hat {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
width: 120px;
|
||||
background-color: #e84701;
|
||||
top: -98px;
|
||||
left: 85px;
|
||||
border-radius: 0 0 60px 60px;
|
||||
}
|
||||
.hat:before {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: #ffffff;
|
||||
left: 100px;
|
||||
top: -15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.belt {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #000000;
|
||||
top: 100px;
|
||||
}
|
||||
.belt:before {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
border: 7px solid #ffdc2e;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.belt:after {
|
||||
height: 5px;
|
||||
width: 15px;
|
||||
background-color: #ffdc2e;
|
||||
left: 100px;
|
||||
top: 12px;
|
||||
}
|
||||
.shoe {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
top: 220px;
|
||||
left: 60px;
|
||||
border-radius: 20px 0 0 0;
|
||||
}
|
||||
.shoe:before {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: #000000;
|
||||
top: 0;
|
||||
left: 60px;
|
||||
border-radius: 0 20px 0 0;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'unknown-person',
|
||||
standalone: true,
|
||||
template: `
|
||||
<div
|
||||
class="bg-black absolute inset-0 z-10 text-white text-center text-3xl"
|
||||
[style.height.%]="100 - step">
|
||||
@if (step !== 100) {
|
||||
<div
|
||||
class="relative top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
Who is here?
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="text-center text-white text-4xl">Happy Christmas !!!</div>
|
||||
<div class="container">
|
||||
<div class="santa">
|
||||
<div class="hand-l"></div>
|
||||
<div class="hand-r"></div>
|
||||
<div class="hat"></div>
|
||||
<div class="face">
|
||||
<div class="beard"></div>
|
||||
<div class="eyes"></div>
|
||||
</div>
|
||||
<div class="belt"></div>
|
||||
<div class="shoe"></div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: [`unknown-person.component.css`],
|
||||
})
|
||||
export class UnknownPersonComponent {
|
||||
@Input({ required: true }) step!: number;
|
||||
}
|
||||
BIN
apps/performance/christmas-web-worker/src/favicon.ico
Normal file
BIN
apps/performance/christmas-web-worker/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
13
apps/performance/christmas-web-worker/src/index.html
Normal file
13
apps/performance/christmas-web-worker/src/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>performance-christmas-web-worker</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
4
apps/performance/christmas-web-worker/src/main.ts
Normal file
4
apps/performance/christmas-web-worker/src/main.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent).catch((err) => console.error(err));
|
||||
5
apps/performance/christmas-web-worker/src/styles.scss
Normal file
5
apps/performance/christmas-web-worker/src/styles.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
14
apps/performance/christmas-web-worker/tailwind.config.js
Normal file
14
apps/performance/christmas-web-worker/tailwind.config.js
Normal file
@@ -0,0 +1,14 @@
|
||||
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
|
||||
const { join } = require('path');
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
|
||||
...createGlobPatternsForDependencies(__dirname),
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
10
apps/performance/christmas-web-worker/tsconfig.app.json
Normal file
10
apps/performance/christmas-web-worker/tsconfig.app.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"types": []
|
||||
},
|
||||
"files": ["src/main.ts"],
|
||||
"include": ["src/**/*.d.ts"],
|
||||
"exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"include": ["src/**/*.ts"],
|
||||
"compilerOptions": {
|
||||
"types": []
|
||||
}
|
||||
}
|
||||
29
apps/performance/christmas-web-worker/tsconfig.json
Normal file
29
apps/performance/christmas-web-worker/tsconfig.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2022",
|
||||
"useDefineForClassFields": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.editor.json"
|
||||
}
|
||||
],
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,6 @@ challengeNumber: 39
|
||||
command: angular-injection-token
|
||||
sidebar:
|
||||
order: 118
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Information
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: 🟠 Web workers
|
||||
description: Challenge 40 is about learning how to create and use a web worker
|
||||
author: Thomas Laforge
|
||||
challengeNumber: 40
|
||||
command: performance-christmas-web-worker
|
||||
sidebar:
|
||||
order: 119
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Information
|
||||
|
||||
This challenge has been created for Angular Advent Calendar 2023.
|
||||
|
||||
This application is basic. We click on the **Discover** button to reveal the surprise hidden behind the black screen. However, the current application provides an awful user experience. When we click on the button, the page freezes, and after a while, it reveals the secret all at once without a smooth animation.
|
||||
|
||||
> Note: To create the application freeze, the loader is based on a very heavy computation function. We could have used a basic timer, but that's not the point of this challenge.
|
||||
|
||||
Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience.
|
||||
|
||||
In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find here.
|
||||
|
||||
## Statement
|
||||
|
||||
The goal of this challenge is to create a smooth animation by isolating the heavy computation function into a web worker.
|
||||
|
||||
First, create a web worker using the schematics, then move the issuing function. Finally, the animation should be smooth and provide an awesome user experience.
|
||||
|
||||
### Note
|
||||
|
||||
Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic.
|
||||
91
package-lock.json
generated
91
package-lock.json
generated
@@ -92,6 +92,8 @@
|
||||
"postcss-preset-env": "~7.5.0",
|
||||
"postcss-url": "~10.1.3",
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
"prettier-plugin-tailwindcss": "^0.5.9",
|
||||
"testing-library-selector": "^0.3.1",
|
||||
"ts-jest": "29.1.0",
|
||||
"ts-node": "10.9.1",
|
||||
@@ -24405,6 +24407,95 @@
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-organize-imports": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz",
|
||||
"integrity": "sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@volar/vue-language-plugin-pug": "^1.0.4",
|
||||
"@volar/vue-typescript": "^1.0.4",
|
||||
"prettier": ">=2.0",
|
||||
"typescript": ">=2.9"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@volar/vue-language-plugin-pug": {
|
||||
"optional": true
|
||||
},
|
||||
"@volar/vue-typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.5.9",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.9.tgz",
|
||||
"integrity": "sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "*",
|
||||
"@prettier/plugin-pug": "*",
|
||||
"@shopify/prettier-plugin-liquid": "*",
|
||||
"@trivago/prettier-plugin-sort-imports": "*",
|
||||
"prettier": "^3.0",
|
||||
"prettier-plugin-astro": "*",
|
||||
"prettier-plugin-css-order": "*",
|
||||
"prettier-plugin-import-sort": "*",
|
||||
"prettier-plugin-jsdoc": "*",
|
||||
"prettier-plugin-marko": "*",
|
||||
"prettier-plugin-organize-attributes": "*",
|
||||
"prettier-plugin-organize-imports": "*",
|
||||
"prettier-plugin-style-order": "*",
|
||||
"prettier-plugin-svelte": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@ianvs/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-pug": {
|
||||
"optional": true
|
||||
},
|
||||
"@shopify/prettier-plugin-liquid": {
|
||||
"optional": true
|
||||
},
|
||||
"@trivago/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-astro": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-css-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-import-sort": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-jsdoc": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-marko": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-attributes": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-style-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-svelte": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-twig-melody": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-bytes": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||
|
||||
@@ -95,6 +95,8 @@
|
||||
"postcss-preset-env": "~7.5.0",
|
||||
"postcss-url": "~10.1.3",
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
"prettier-plugin-tailwindcss": "^0.5.9",
|
||||
"testing-library-selector": "^0.3.1",
|
||||
"ts-jest": "29.1.0",
|
||||
"ts-node": "10.9.1",
|
||||
|
||||
Reference in New Issue
Block a user