From a9165c9e9e36db940b016b2fa09efd4e05f54567 Mon Sep 17 00:00:00 2001 From: Aiden Bai Date: Mon, 12 Apr 2021 14:29:22 -0700 Subject: [PATCH] style: organize imports --- .babelrc | 2 +- package.json | 1 + src/__test__/component.spec.ts | 2 +- src/__test__/index.spec.ts | 2 +- src/component.ts | 6 ++--- src/core/__test__/compile.spec.ts | 4 +-- src/core/compile.ts | 6 ++--- src/core/directive.ts | 7 +++-- src/core/directives/__test__/bind.spec.ts | 2 +- src/core/directives/__test__/for.spec.ts | 30 ++++++++++++++++++---- src/core/directives/__test__/html.spec.ts | 20 ++++++++++++--- src/core/directives/__test__/model.spec.ts | 3 +-- src/core/directives/__test__/on.spec.ts | 3 +-- src/core/directives/__test__/show.spec.ts | 14 +++++++--- src/core/directives/__test__/text.spec.ts | 8 ++++-- src/core/directives/for.ts | 12 ++++----- src/core/directives/html.ts | 8 +++--- src/core/directives/model.ts | 5 ++-- src/core/directives/on.ts | 1 - src/core/render.ts | 11 ++++---- src/core/utils/__test__/patterns.spec.ts | 4 +-- src/core/utils/concurrent.ts | 5 ++-- src/core/utils/patterns.ts | 3 +-- src/index.ts | 9 +++---- tsconfig.json | 2 +- yarn.lock | 5 ++++ 26 files changed, 105 insertions(+), 70 deletions(-) diff --git a/.babelrc b/.babelrc index 9b724cb..d38b94e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { "presets": ["@babel/preset-typescript", "@babel/preset-env"], - "plugins": ["@babel/plugin-proposal-class-properties"], + "plugins": ["@babel/plugin-proposal-class-properties", "babel-plugin-loop-optimizer"], "comments": false } diff --git a/package.json b/package.json index fb29d3d..e60b11c 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@types/jest": "^26.0.22", "@typescript-eslint/eslint-plugin": "^4.21.0", "@typescript-eslint/parser": "^4.21.0", + "babel-plugin-loop-optimizer": "^1.4.1", "del-cli": "^3.0.1", "esbuild": "^0.11.1", "eslint": "^7.24.0", diff --git a/src/__test__/component.spec.ts b/src/__test__/component.spec.ts index 0a73ef9..0e08e6b 100644 --- a/src/__test__/component.spec.ts +++ b/src/__test__/component.spec.ts @@ -1,6 +1,6 @@ import { component, Component } from '../component'; -import reactive from '../core/reactive'; import { directives } from '../core/directive'; +import reactive from '../core/reactive'; import { getElementCustomProp } from '../core/utils/elementCustomProp'; describe('.component', () => { diff --git a/src/__test__/index.spec.ts b/src/__test__/index.spec.ts index 4cb75d5..e6afc56 100644 --- a/src/__test__/index.spec.ts +++ b/src/__test__/index.spec.ts @@ -1,6 +1,6 @@ -import { init } from '../index'; import { Component } from '../component'; import { getElementCustomProp } from '../core/utils/elementCustomProp'; +import { init } from '../index'; // @ts-expect-error: callback doesn't exist on window, but good enough for test window.callback = jest.fn(); diff --git a/src/component.ts b/src/component.ts index 3ce0ec5..11cb7ab 100644 --- a/src/component.ts +++ b/src/component.ts @@ -1,13 +1,11 @@ /* istanbul ignore file */ -import { Directives, DirectiveProps, Watchers, State, ASTNode } from './models/structs'; - -import { directives } from './core/directive'; import compile from './core/compile'; +import { directives } from './core/directive'; import reactive from './core/reactive'; import render from './core/render'; - import { setElementCustomProp } from './core/utils/elementCustomProp'; +import { ASTNode, DirectiveProps, Directives, State, Watchers } from './models/structs'; export class Component { public state: State; diff --git a/src/core/__test__/compile.spec.ts b/src/core/__test__/compile.spec.ts index 86d06da..830faa1 100644 --- a/src/core/__test__/compile.spec.ts +++ b/src/core/__test__/compile.spec.ts @@ -1,11 +1,11 @@ +import compute from '../../core/utils/computeExpression'; import { compile, createASTNode, + flattenNodeChildren, isListRenderScope, isUnderListRenderScope, - flattenNodeChildren, } from '../compile'; -import compute from '../../core/utils/computeExpression'; describe('.compile', () => { it('should not return anything', () => { diff --git a/src/core/compile.ts b/src/core/compile.ts index a2fd77d..de23e79 100644 --- a/src/core/compile.ts +++ b/src/core/compile.ts @@ -1,9 +1,9 @@ import { DIRECTIVE_PREFIX, DIRECTIVE_SHORTHANDS } from '../models/generics'; -import { State, DirectiveKV, Refs, ASTNode, ASTNodeType } from '../models/structs'; -import { expressionPropRE, hasDirectiveRE, eventDirectivePrefixRE } from './utils/patterns'; +import { ASTNode, ASTNodeType, DirectiveKV, Refs, State } from '../models/structs'; +import compute from './utils/computeExpression'; import { getElementCustomProp, setElementCustomProp } from './utils/elementCustomProp'; +import { eventDirectivePrefixRE, expressionPropRE, hasDirectiveRE } from './utils/patterns'; import removeDupesFromArray from './utils/removeDupesFromArray'; -import compute from './utils/computeExpression'; export const isListRenderScope = (el: HTMLElement): boolean => { return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); diff --git a/src/core/directive.ts b/src/core/directive.ts index 02fdfa1..032f2e4 100644 --- a/src/core/directive.ts +++ b/src/core/directive.ts @@ -1,12 +1,11 @@ -import { Directives, DirectiveProps } from '../models/structs'; - +import { DirectiveProps, Directives } from '../models/structs'; import { bindDirective } from './directives/bind'; +import { forDirective } from './directives/for'; import { htmlDirective } from './directives/html'; import { modelDirective } from './directives/model'; -import { showDirective } from './directives/show'; import { onDirective } from './directives/on'; +import { showDirective } from './directives/show'; import { textDirective } from './directives/text'; -import { forDirective } from './directives/for'; export const directives: Directives = { BIND: bindDirective, diff --git a/src/core/directives/__test__/bind.spec.ts b/src/core/directives/__test__/bind.spec.ts index c6fb4d1..f8581e1 100644 --- a/src/core/directives/__test__/bind.spec.ts +++ b/src/core/directives/__test__/bind.spec.ts @@ -1,5 +1,5 @@ -import { bindDirective } from '../bind'; import compute from '../../utils/computeExpression'; +import { bindDirective } from '../bind'; describe('.bindDirective', () => { it('should bind class based on state boolean value', () => { diff --git a/src/core/directives/__test__/for.spec.ts b/src/core/directives/__test__/for.spec.ts index b67fe0b..80891e0 100644 --- a/src/core/directives/__test__/for.spec.ts +++ b/src/core/directives/__test__/for.spec.ts @@ -7,7 +7,11 @@ describe('.forDirective', () => { const el = document.createElement('ul'); const expression = `bar in foo`; const state = { foo: ['bar', 'bar', 'bar'] }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; setElementCustomProp(el, '__for_template', '
  • '); el.innerHTML = '
  • '; @@ -33,7 +37,11 @@ describe('.forDirective', () => { const el = document.createElement('table'); const expression = `(bar, i) in foo`; const state = { foo: ['bar', 'bar', 'bar'] }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; setElementCustomProp(el, '__for_template', ''); @@ -55,7 +63,11 @@ describe('.forDirective', () => { const el = document.createElement('p'); const expression = `_ in foo`; const state = { foo: ['bar', 'bar', 'bar'] }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; setElementCustomProp(el, '__for_template', '
  • '); @@ -74,7 +86,11 @@ describe('.forDirective', () => { const el = document.createElement('p'); const expression = `_ in foo`; const state = { foo: ['bar', 'bar'] }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; setElementCustomProp(el, '__for_template', '
  • '); setElementCustomProp(el, '__for_state', ['bar', 'bar']); @@ -95,7 +111,11 @@ describe('.forDirective', () => { const el = document.createElement('p'); const expression = `_ in foo`; const state = { foo: ['bar', 'bar', 'bar'] }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; setElementCustomProp(el, '__for_template', '
  • '); setElementCustomProp(el, '__for_state', ['bar', 'bar', 'bar']); diff --git a/src/core/directives/__test__/html.spec.ts b/src/core/directives/__test__/html.spec.ts index 60a4bb7..040208e 100644 --- a/src/core/directives/__test__/html.spec.ts +++ b/src/core/directives/__test__/html.spec.ts @@ -1,12 +1,16 @@ -import { htmlDirective } from '../html'; import compute from '../../utils/computeExpression'; +import { htmlDirective } from '../html'; describe('.htmlDirective', () => { it('should interpolate state into interHTML', () => { const el = document.createElement('div'); const expression = 'foo'; const state = { foo: 'bar' }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; const node = { el, directives: { html: data }, @@ -27,7 +31,11 @@ describe('.htmlDirective', () => { const el = document.createElement('div'); const expression = '

    foo

    '; const state = {}; - const data = { value: expression, compute: compute(expression, el), deps: [] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: [], + }; const node = { el, directives: { html: data }, @@ -48,7 +56,11 @@ describe('.htmlDirective', () => { const el = document.createElement('div'); const expression = `foo`; const state = { foo: '

    ' }; - const data = { value: expression, compute: compute(expression, el), deps: ['foo'] }; + const data = { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }; const node = { el, directives: { html: data }, diff --git a/src/core/directives/__test__/model.spec.ts b/src/core/directives/__test__/model.spec.ts index 96ce3f0..38220ee 100644 --- a/src/core/directives/__test__/model.spec.ts +++ b/src/core/directives/__test__/model.spec.ts @@ -1,7 +1,6 @@ import { fireEvent } from '@testing-library/dom'; - -import { modelDirective, inputCallback } from '../model'; import compute from '../../utils/computeExpression'; +import { inputCallback, modelDirective } from '../model'; describe('.modelDirective', () => { it('should attach and model input', () => { diff --git a/src/core/directives/__test__/on.spec.ts b/src/core/directives/__test__/on.spec.ts index 23f6e6f..467c523 100644 --- a/src/core/directives/__test__/on.spec.ts +++ b/src/core/directives/__test__/on.spec.ts @@ -1,8 +1,7 @@ import { fireEvent } from '@testing-library/dom'; - -import { onDirective } from '../on'; import compute from '../../utils/computeExpression'; import { getElementCustomProp } from '../../utils/elementCustomProp'; +import { onDirective } from '../on'; describe('.onDirective', () => { it('should attach click event listener', () => { diff --git a/src/core/directives/__test__/show.spec.ts b/src/core/directives/__test__/show.spec.ts index 2ff7f8e..fe15643 100644 --- a/src/core/directives/__test__/show.spec.ts +++ b/src/core/directives/__test__/show.spec.ts @@ -1,5 +1,5 @@ -import { showDirective } from '../show'; import compute from '../../utils/computeExpression'; +import { showDirective } from '../show'; describe('.showDirective', () => { it('should interpolate state into textContent', () => { @@ -10,7 +10,11 @@ describe('.showDirective', () => { showDirective({ el, parts: [`show`], - data: { value: expression, compute: compute(expression, el), deps: ['foo'] }, + data: { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }, state, }); expect(el.style.display).toEqual(''); @@ -20,7 +24,11 @@ describe('.showDirective', () => { showDirective({ el, parts: [`show`], - data: { value: expression, compute: compute(expression, el), deps: ['foo'] }, + data: { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }, state, }); expect(el.style.display).toEqual('none'); diff --git a/src/core/directives/__test__/text.spec.ts b/src/core/directives/__test__/text.spec.ts index 58e0f4d..29f08ba 100644 --- a/src/core/directives/__test__/text.spec.ts +++ b/src/core/directives/__test__/text.spec.ts @@ -1,5 +1,5 @@ -import { textDirective } from '../text'; import compute from '../../utils/computeExpression'; +import { textDirective } from '../text'; describe('.textDirective', () => { it('should interpolate state into textContent', () => { @@ -10,7 +10,11 @@ describe('.textDirective', () => { textDirective({ el, parts: [`text`], - data: { value: expression, compute: compute(expression, el), deps: ['foo'] }, + data: { + value: expression, + compute: compute(expression, el), + deps: ['foo'], + }, state, }); expect(el.textContent).toEqual('bar'); diff --git a/src/core/directives/for.ts b/src/core/directives/for.ts index 242bdfc..83e32a7 100644 --- a/src/core/directives/for.ts +++ b/src/core/directives/for.ts @@ -1,16 +1,14 @@ /* istanbul ignore file */ -import { DIRECTIVE_PREFIX } from '../../models/generics'; -import { ASTNode, DirectiveProps } from '../../models/structs'; - import compile from '../../core/compile'; -import render from '../../core/render'; import { directives } from '../../core/directive'; - -import { expressionPropRE, parenthesisWrapReplaceRE } from '../utils/patterns'; -import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; +import render from '../../core/render'; +import { DIRECTIVE_PREFIX } from '../../models/generics'; +import { ASTNode, DirectiveProps } from '../../models/structs'; import adjustDeps from '../utils/adjustDeps'; import computeExpression from '../utils/computeExpression'; +import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; +import { expressionPropRE, parenthesisWrapReplaceRE } from '../utils/patterns'; // This directive is size-based, not content-based, since everything is compiled and rerendered diff --git a/src/core/directives/html.ts b/src/core/directives/html.ts index 70b1234..77a438d 100644 --- a/src/core/directives/html.ts +++ b/src/core/directives/html.ts @@ -1,11 +1,9 @@ -import { DirectiveProps } from '../../models/structs'; - import compile from '../../core/compile'; -import render from '../../core/render'; import { directives } from '../../core/directive'; - -import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; +import render from '../../core/render'; +import { DirectiveProps } from '../../models/structs'; import adjustDeps from '../utils/adjustDeps'; +import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; export const htmlDirective = ({ el, data, state, node }: DirectiveProps): void => { node = node!; diff --git a/src/core/directives/model.ts b/src/core/directives/model.ts index f1e9da9..35b8e68 100644 --- a/src/core/directives/model.ts +++ b/src/core/directives/model.ts @@ -1,7 +1,6 @@ -import { DirectiveProps, DirectiveData, State } from '../../models/structs'; - -import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; +import { DirectiveData, DirectiveProps, State } from '../../models/structs'; import computeExpression from '../utils/computeExpression'; +import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; export const inputCallback = ( el: HTMLInputElement, diff --git a/src/core/directives/on.ts b/src/core/directives/on.ts index 3888a05..1d75fc2 100644 --- a/src/core/directives/on.ts +++ b/src/core/directives/on.ts @@ -1,5 +1,4 @@ import { DirectiveProps } from '../../models/structs'; - import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp'; export const onDirective = ({ el, parts, data, state }: DirectiveProps): void => { diff --git a/src/core/render.ts b/src/core/render.ts index 329a252..f73ba4e 100644 --- a/src/core/render.ts +++ b/src/core/render.ts @@ -1,9 +1,8 @@ import { DIRECTIVE_PREFIX, UnknownKV } from '../models/generics'; -import { Directives, ASTNode, ASTNodeType } from '../models/structs'; -import { rawDirectiveSplitRE } from './utils/patterns'; -import concurrent from './utils/concurrent'; - +import { ASTNode, ASTNodeType, Directives } from '../models/structs'; import { renderDirective } from './directive'; +import concurrent from './utils/concurrent'; +import { rawDirectiveSplitRE } from './utils/patterns'; const render = ( ast: ASTNode[], @@ -13,7 +12,7 @@ const render = ( ): void => { const legalDirectiveNames = Object.keys(directives); - concurrent(true, function* () { + concurrent(25, function* () { for (const node of ast) { yield; const isStatic = node.type === ASTNodeType.STATIC; @@ -55,7 +54,7 @@ const render = ( } } } - })(); + }); }; export default render; diff --git a/src/core/utils/__test__/patterns.spec.ts b/src/core/utils/__test__/patterns.spec.ts index e64fff6..f39d1b6 100644 --- a/src/core/utils/__test__/patterns.spec.ts +++ b/src/core/utils/__test__/patterns.spec.ts @@ -1,9 +1,9 @@ import { + eventDirectivePrefixRE, expressionPropRE, - rawDirectiveSplitRE, hasDirectiveRE, - eventDirectivePrefixRE, parenthesisWrapReplaceRE, + rawDirectiveSplitRE, } from '../patterns'; describe('.patterns', () => { diff --git a/src/core/utils/concurrent.ts b/src/core/utils/concurrent.ts index 3fedcc4..c1cff31 100644 --- a/src/core/utils/concurrent.ts +++ b/src/core/utils/concurrent.ts @@ -4,18 +4,17 @@ // This is kind of like time slicing in React but less advanced export const concurrent = ( - limit = true, + threshold: number, generatorFunction: () => Generator // eslint-disable-next-line @typescript-eslint/ban-types ): Function => { const generator = generatorFunction(); - const ms = limit ? 25 : 1000; return function next() { const start = performance.now(); let task = null; do { task = generator.next(); - } while (performance.now() - start < ms && !task.done); + } while (performance.now() - start < threshold && !task.done); if (task.done) return; /* istanbul ignore next */ diff --git a/src/core/utils/patterns.ts b/src/core/utils/patterns.ts index 6fb98db..22c3eb5 100644 --- a/src/core/utils/patterns.ts +++ b/src/core/utils/patterns.ts @@ -1,5 +1,4 @@ -import { DIRECTIVE_PREFIX } from '../../models/generics'; -import { DIRECTIVE_SHORTHANDS } from '../../models/generics'; +import { DIRECTIVE_PREFIX, DIRECTIVE_SHORTHANDS } from '../../models/generics'; // Split directive:modifier.property export const rawDirectiveSplitRE = (): RegExp => /:|\./gim; diff --git a/src/index.ts b/src/index.ts index 96cf559..53d26ab 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,12 @@ // Exports wrapped in Lucia namespace -import { DIRECTIVE_PREFIX } from './models/generics'; import component from './component'; - -import render from './core/render'; import compile from './core/compile'; -import reactive from './core/reactive'; import { directives } from './core/directive'; -import { getElementCustomProp } from './core/utils/elementCustomProp'; +import reactive from './core/reactive'; +import render from './core/render'; import computeExpression from './core/utils/computeExpression'; +import { getElementCustomProp } from './core/utils/elementCustomProp'; +import { DIRECTIVE_PREFIX } from './models/generics'; export { component, compile, render, reactive, directives, computeExpression }; diff --git a/tsconfig.json b/tsconfig.json index eab7d50..18d54f8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,7 @@ "declarationDir": "dist/types", "moduleResolution": "node", "module": "es6", - "target": "es5", + "target": "es6", "suppressImplicitAnyIndexErrors": true, "allowSyntheticDefaultImports": true, "noFallthroughCasesInSwitch": true, diff --git a/yarn.lock b/yarn.lock index b3bef34..0e19bf4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1781,6 +1781,11 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" +babel-plugin-loop-optimizer@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/babel-plugin-loop-optimizer/-/babel-plugin-loop-optimizer-1.4.1.tgz#61b2e029a5c2157f575c7d3ae99acc63ae2b53d9" + integrity sha512-oI0NNU0MpzyRSluA7MCQ3nAj9gga8NIotQAPOt1P92mYnIRkkfczXGrolKaW6TDw0l0Glu9JF+AYlnTdLzTo2A== + babel-plugin-polyfill-corejs2@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz#686775bf9a5aa757e10520903675e3889caeedc4"