Optimize TypeScript

Replace costro/jsx by jsx-dom

config/.eslintrc.js

@@ -39,7 +39,9 @@ module.exports = {
 		'@typescript-eslint/ban-ts-comment': 'off',
 		'@typescript-eslint/no-var-requires': 'off',
 		'@typescript-eslint/no-explicit-any': 'off',
-		'react/no-unknown-property': ['error', { ignore: ['innerHTML'] }]
+		'react/no-unknown-property': ['error', { ignore: ['innerHTML'] }],
+		'react/react-in-jsx-scope': 'off',
+		'react/jsx-uses-react': 'off'
 	},
 
 	globals: {
@@ -52,8 +54,6 @@ module.exports = {
 
 	settings: {
 		react: {
-			pragma: 'createElement',
-			fragment: 'Fragment',
 			version: '0' // Remove the warning of the missing React package
 		}
 	}

config/babel.config.js

@@ -1,18 +1,18 @@
 module.exports = function (api) {
 	api.cache(true)
 
-	const presets = [['@babel/preset-env']]
-	const plugins = [
-		'babel-plugin-dynamic-import-node',
-		'@babel/proposal-class-properties',
+	const presets = [
+		'@babel/preset-env',
+		'@babel/preset-typescript',
 		[
-			'@babel/plugin-transform-react-jsx',
+			'@babel/preset-react',
 			{
-				pragma: 'createElement',
-				pragmaFrag: 'Fragment'
+				runtime: 'automatic',
+				importSource: 'jsx-dom-cjs'
 			}
 		]
 	]
+	const plugins = ['babel-plugin-dynamic-import-node', '@babel/proposal-class-properties']
 
 	return {
 		presets,

package.json

@@ -11,9 +11,12 @@
 	"scripts": {
 		"build:v2": "rm -rf ./web/ && webpack --mode=production --config=config/webpack.config.js --env manifest=v2",
 		"build:v3": "rm -rf ./web/ && webpack --mode=production --config=config/webpack.config.js --env manifest=v3",
+		"dev": "tsc --watch",
+		"dev:unit": "jest --config config/jest.config.js --watchAll --coverage",
 		"dev:v2": "rm -rf ./web/ && webpack serve --mode=development --config=config/webpack.config.js --env manifest=v2",
 		"dev:v3": "rm -rf ./web/ && webpack serve --mode=development --config=config/webpack.config.js --env manifest=v3",
 		"inspect": "node --inspect node_modules/webpack/bin/webpack.js --config webpack.config.js --mode=development",
+		"pre:publish": "npm run release:v3 && npm run release:v2 && npm run test:ext && npm run test",
 		"release:v2": "rm -rf ./web/ && webpack --mode=production --config=config/webpack.config.js --env manifest=v2 --env release=true",
 		"release:v3": "rm -rf ./web/ && webpack --mode=production --config=config/webpack.config.js --env manifest=v3 --env release=true",
 		"test": "npm run test:eslint && npm run test:stylelint && npm run test:type-check && npm run test:markdown && npm run test:unit",
@@ -23,7 +26,6 @@
 		"test:stylelint": "stylelint './src/**/*.css' --config ./config/stylelint.config.js",
 		"test:type-check": "tsc --noEmit",
 		"test:unit": "jest --config config/jest.config.js --verbose --coverage",
-		"test:watch": "jest --config config/jest.config.js --watchAll --coverage",
 		"watch:v2": "rm -rf ./web/ && webpack --watch --mode=development --config=config/webpack.config.js --env manifest=v2",
 		"watch:v3": "rm -rf ./web/ && webpack --watch --mode=development --config=config/webpack.config.js --env manifest=v3"
 	},
@@ -35,8 +37,9 @@
 	"devDependencies": {
 		"@babel/core": "^7.21.8",
 		"@babel/plugin-proposal-class-properties": "^7.16.0",
-		"@babel/plugin-transform-react-jsx": "^7.21.5",
 		"@babel/preset-env": "^7.21.5",
+		"@babel/preset-react": "^7.22.5",
+		"@babel/preset-typescript": "^7.22.5",
 		"@types/chrome": "^0.0.235",
 		"@types/jest": "^29.5.1",
 		"@types/react": "^18.2.6",
@@ -61,6 +64,7 @@
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
 		"jest-transform-stub": "^2.0.0",
+		"jsx-dom-cjs": "^8.0.6",
 		"markdownlint-cli": "^0.34.0",
 		"mini-css-extract-plugin": "^2.7.5",
 		"postcss": "^8.4.23",

src/popup/__tests__/popup.test.js

@@ -1,4 +1,3 @@
-import { createElement } from 'costro/jsx'
 import Popup from '../assets/scripts/popup'
 import fixturesAbtasty from '../../shared/assets/fixtures/abtasty.json'
 import DataManager from 'shared/utils/data-manager'

src/popup/assets/scripts/popup.tsx

@@ -1,6 +1,6 @@
 import DataManager from 'shared/utils/data-manager'
 import { isExtensionMode, namespace } from 'shared/utils/bridge'
-import { Data, ChangeInfo } from 'shared/assets/interfaces/interfaces'
+import { Data, ChangeInfo } from 'shared/assets/definitions/types'
 import List from '../../components/list/assets/scripts/list'
 import Detail from '../../components/detail/assets/scripts/detail'
 import Empty from 'shared/empty/assets/scripts/empty'

src/popup/components/detail/__tests__/detail.test.js

@@ -1,4 +1,3 @@
-import { createElement } from 'costro/jsx'
 import validateTarget from 'validate-target'
 import { namespace, sendMessage } from 'shared/utils/bridge'
 import fixturesAbtasty from '../../../../shared/assets/fixtures/abtasty.json'

src/popup/components/detail/assets/scripts/detail.tsx

@@ -1,9 +1,8 @@
 import validateTarget from 'validate-target'
-import { createElement } from 'costro/jsx'
 import TemplateDetail from './templates/detail'
 import { Component, navigate } from 'costro'
 import { sendMessage, namespace } from 'shared/utils/bridge'
-import { TargetingsSortedByStatus } from 'shared/assets/interfaces/interfaces'
+import { TargetingsSortedByStatus } from 'shared/assets/definitions/types'
 
 export default class Detail extends Component {
 	element: null | HTMLElement

src/popup/components/detail/assets/scripts/templates/detail.tsx

@@ -1,12 +1,11 @@
-import { createElement, Fragment } from 'costro/jsx'
 import externalLink from 'shared/assets/svgs/external-link.svg'
 import arrowBottom from 'shared/assets/svgs/arrow-bottom.svg'
 import chart from 'shared/assets/svgs/chart.svg'
 import TargetingTemplate from 'shared/targeting/assets/scripts/targeting'
 import VariationTemplate from 'shared/variation/assets/scripts/variation'
 import TrackingTemplate from 'shared/tracking/assets/scripts/tracking'
 import CollapseTemplate from 'shared/collapse/assets/scripts/collapse'
-import { Targeting, DetailData } from 'shared/assets/interfaces/interfaces'
+import { Targeting, DetailData } from 'shared/assets/definitions/types'
 import { navigate } from 'costro'
 
 /**

src/popup/components/list/__tests__/list.test.js

@@ -1,4 +1,3 @@
-import { createElement } from 'costro/jsx'
 import validateTarget from 'validate-target'
 import { namespace, sendMessage } from 'shared/utils/bridge'
 import List from '../assets/scripts/list'

src/popup/components/list/assets/scripts/list.tsx

@@ -1,9 +1,8 @@
 import validateTarget from 'validate-target'
-import { createElement } from 'costro/jsx'
 import TemplateList from './templates/list'
 import { Component, navigate } from 'costro'
 import { sendMessage, isExtensionMode, namespace } from 'shared/utils/bridge'
-import { TestsSortedByStatus } from 'shared/assets/interfaces/interfaces'
+import { TestsSortedByStatus } from 'shared/assets/definitions/types'
 
 export default class List extends Component {
 	element: null | HTMLElement

src/popup/components/list/assets/scripts/templates/list.tsx

@@ -1,9 +1,8 @@
-import { createElement, Fragment } from 'costro/jsx'
 import arrowBottom from 'shared/assets/svgs/arrow-bottom.svg'
 import check from 'shared/assets/svgs/check.svg'
 import clear from 'shared/assets/svgs/clear.svg'
 import BadgeTemplate from 'shared/badge/assets/scripts/badge'
-import { ListData, Result } from 'shared/assets/interfaces/interfaces'
+import { ListData, Result } from 'shared/assets/definitions/types'
 import { navigate } from 'costro'
 
 /**

src/shared/assets/definitions/custom.d.ts

@@ -2,3 +2,4 @@ declare module '*.svg' {
 	const content: any
 	export default content
 }
+declare module 'validate-target'

src/shared/assets/definitions/types.ts

@@ -0,0 +1,114 @@
+export type Condition = {
+	name?: string
+	value: string
+	include: boolean
+	condition: number
+	url?: string
+	operator?: string
+	favorite_url_id: string
+}
+
+export type FavoriteUrlScope = {
+	favoriteUrlScopeConditions: Condition[]
+	urlScopes: Condition[]
+}
+
+export type Targeting = {
+	key: string
+	success: boolean
+	conditions?: Condition[] | FavoriteUrlScope
+	name: string
+}
+
+export type Result = {
+	key: string
+	name: string
+	type: string
+	status: string
+	variationID: number
+	variationName: string
+	targetings: {
+		targetPages: Record<string, Targeting>
+		qaParameters: Record<string, Targeting>
+		segment: Targeting[]
+		trigger: Targeting[]
+	}
+}
+
+export type Variation = {
+	id: number
+	name: string
+	traffic: number
+}
+
+export type Variations = Record<string, Variation>
+
+export type Tracking = {
+	name: string
+	selector: string
+}
+
+export type Trackings = {
+	click: Tracking[]
+	mousedown: Tracking[]
+	submit: Tracking[]
+}
+
+export type Test = {
+	id: number
+	isAsync: string
+	parentID: number
+	asyncVariationInfoById: Variations
+	actionTrackings: Trackings
+	traffic: number
+}
+
+export type Results = Record<string, Result>
+
+export type Data = {
+	accountData: {
+		tests: Record<string, any>
+	}
+	results: Results
+	debug: boolean
+}
+
+export type TestsSortedByStatus = {
+	accepted: Result[]
+	rejected: Result[]
+}
+
+export type TargetingItemSortedByStatus = {
+	accepted: Targeting[]
+	rejected: Targeting[]
+}
+
+export type TargetingsSortedByStatus = Record<string, TargetingItemSortedByStatus>
+
+export type CustomEvent = {
+	detail: object
+}
+
+export type Wording = Record<string, string>
+
+export type DetailData = {
+	testId: string
+	identifier: string
+	test: Test
+	result: Result
+	targetingSorted: TargetingItemSortedByStatus
+}
+
+export type ListData = {
+	testsSortedByStatus: TestsSortedByStatus
+	debug: boolean
+}
+
+export type ChangeInfo = {
+	status: string
+}
+
+export type TrafficAllocation = {
+	original: number
+	untracked: number
+}