switch from webpack to esbuild

Author: kirjavascript

TODO

@@ -27,6 +27,7 @@ Security context: 0x08f21517ef51 <String[#39]: file://CD552D653EC98D0FCB75745E2A
 ROADMAP
 look at issues related to crashes
 rotsprite
+improve undo/redo when drawing pixels / moving things
 animation editor
     export to gif
 ==

app/components/art/active-selection.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
-import { magenta } from '!!sass-variables-loader!#styles/variables.scss';
+import { magenta } from 'sass-variables';
 import { id } from '#util/uuid';
 
-@observer
-export class ActiveSelection extends Component {
+export const ActiveSelection = observer(class ActiveSelection extends Component {
 
     id = id();
 
@@ -34,10 +33,9 @@ export class ActiveSelection extends Component {
         </svg>;
     }
 
-}
+});
 
-@observer
-class SelectionLayer extends Component {
+const SelectionLayer = observer(class SelectionLayer extends Component {
 
     render() {
         const { activeTiles } = environment;
@@ -74,4 +72,4 @@ class SelectionLayer extends Component {
             })}
         </g>;
     }
-}
+});

app/components/art/index.js

@@ -3,12 +3,11 @@ import { environment } from '#store/environment';
 import { mappingState } from '../mappings/state';
 import { Tile } from './tile';
 import { observer } from 'mobx-react';
-import { scrollbarWidth } from '!!sass-variables-loader!#styles/variables.scss';
+import { scrollbarWidth } from 'sass-variables';
 import { DimensionsComponent } from '#util/dimensions-component';
 import { ActiveSelection } from './active-selection';
 
-@observer
-export class Art extends DimensionsComponent {
+export const Art = observer(class Art extends DimensionsComponent {
 
     mousedown = false;
     onMouseDown = () => { this.mousedown = true; };
@@ -83,4 +82,4 @@ export class Art extends DimensionsComponent {
         </div>;
     }
 
-}
+});

app/components/art/tile.js

@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 
-@observer
-export class Tile extends Component {
+export const Tile = observer(class Tile extends Component {
 
     render() {
         const { data = [], paletteLine = 0, scale = 4, ...otherProps } = this.props;
@@ -43,4 +42,4 @@ export class Tile extends Component {
         );
     }
 
-}
+});

app/components/import/index.js

@@ -5,8 +5,7 @@ import { importState } from './state';
 import { DetectSprites } from './ui-detect';
 import { ImportSprites } from './ui-import';
 
-@observer
-class Importer extends React.Component {
+const Importer = observer(class Importer extends React.Component {
 
     render() {
         const { config: { active }, sprites } = importState;
@@ -19,7 +18,7 @@ class Importer extends React.Component {
             return false;
         }
     }
-}
+});
 
 render(
     <Importer/>,

app/components/import/state.js

@@ -1,4 +1,4 @@
-import { observable, computed, action, autorun, toJS } from 'mobx';
+import { observable, computed, action, autorun, toJS, makeObservable } from 'mobx';
 const { dialog } = require('@electron/remote');
 import { errorMsg } from '#util/dialog';
 import { removeBackground } from './remove-background';
@@ -8,23 +8,22 @@ import { getMappings } from './generate-mappings';
 import { importSprite } from './import-sprite';
 
 class ImportState {
-
-    @observable config = {
+    config = {
         active: false,
     };
 
-    @observable bboxes = [];
-    @observable sprites = [];
-    @observable mappings = [];
-    @observable type = 'mappings';
-    @observable importWidth = 0;
-    @observable importHeight = 0;
-    @observable spriteIndex = 0;
-    @observable paletteLine = 0;
-    @observable fuzziness = 4;
-    @observable scale = 4;
-
-    @action reset = () => {
+    bboxes = [];
+    sprites = [];
+    mappings = [];
+    type = 'mappings';
+    importWidth = 0;
+    importHeight = 0;
+    spriteIndex = 0;
+    paletteLine = 0;
+    fuzziness = 4;
+    scale = 4;
+
+    reset = () => {
         this.path = undefined;
         this.canvas = undefined;
         this.ctx = undefined;
@@ -35,7 +34,7 @@ class ImportState {
         this.mappings.replace([]);
     };
 
-    @action newImport = () => {
+    newImport = () => {
 
         dialog.showOpenDialog({
             title: 'Import Spritesheet',
@@ -51,7 +50,7 @@ class ImportState {
             .catch(console.error);
     };
 
-    @action cancel = () => {
+    cancel = () => {
         this.reset();
         this.config.active = false;
     };
@@ -98,7 +97,7 @@ class ImportState {
         ctx.putImageData(buffer, 32, 32);
     };
 
-    @action getBBoxes = () => {
+    getBBoxes = () => {
         const { ctx, canvas } = this;
         const { width, height } = canvas;
         const buffer = ctx.getImageData(0, 0, width, height);
@@ -107,7 +106,7 @@ class ImportState {
         );
     };
 
-    @action importSprites = () => {
+    importSprites = () => {
         const { ctx, canvas } = this;
         const { width, height } = canvas;
         const buffer = ctx.getImageData(0, 0, width, height);
@@ -123,17 +122,47 @@ class ImportState {
         this.sprites.replace(sprites);
     };
 
-    @action backToDetect = () => {
+    backToDetect = () => {
         this.sprites.replace([]);
     };
 
+    constructor() {
+        makeObservable(this, {
+            config: observable,
+            bboxes: observable,
+            sprites: observable,
+            mappings: observable,
+            type: observable,
+            importWidth: observable,
+            importHeight: observable,
+            spriteIndex: observable,
+            paletteLine: observable,
+            fuzziness: observable,
+            scale: observable,
+            reset: action,
+            newImport: action,
+            cancel: action,
+            getBBoxes: action,
+            importSprites: action,
+            backToDetect: action,
+            currentSprite: computed,
+            tileQty: computed,
+            changePalette: action,
+            changeType: action,
+            importOne: action,
+            importAll: action,
+            next: action,
+            prev: action
+        });
+    }
+
     // import stuff
 
-    @computed get currentSprite() {
+    get currentSprite() {
         return this.sprites[this.spriteIndex];
     }
 
-    @computed get tileQty() {
+    get tileQty() {
         return this.mappings.reduce((a, c) => {
             return a + (c.width * c.height);
         }, 0);
@@ -167,30 +196,30 @@ class ImportState {
         }
     };
 
-    @action changePalette = () => {
+    changePalette = () => {
         const { canvas, ctx } = this;
         const { width, height, buffer } = this.currentSprite;
         const coloredBuffer = colorMatch(buffer, this.paletteLine);
         ctx.putImageData(coloredBuffer, 8, 8);
     };
 
-    @action changeType = () => {
+    changeType = () => {
         const { canvas, ctx, type } = this;
         this.mappings.replace(getMappings(canvas, ctx, type));
-    }
+    };
 
-    @action importOne = () => {
+    importOne = () => {
         const { ctx, mappings, paletteLine } = this;
         importSprite(ctx, mappings, paletteLine);
         this.next();
     };
 
-    @action importAll = () => {
+    importAll = () => {
         this.auto = true;
         this.spriteIndex = -1;
     };
 
-    @action next = () => {
+    next = () => {
         if (this.spriteIndex < this.sprites.length-1) {
             this.spriteIndex++;
         }
@@ -199,12 +228,11 @@ class ImportState {
         }
     };
 
-    @action prev = () => {
+    prev = () => {
         if (this.spriteIndex > 0) {
             this.spriteIndex--;
         }
     };
-
 }
 
 const importState = new ImportState();

app/components/import/ui-detect.js

@@ -5,8 +5,7 @@ import { importState } from './state';
 import { Item, Select, Input } from '#ui';
 import { fuzzyAssert, zoomAssert } from '#util/assertions';
 
-@observer
-export class DetectSprites extends React.Component {
+export const DetectSprites = observer(class DetectSprites extends React.Component {
 
     render() {
         const { bboxes, scale } = importState;
@@ -92,4 +91,4 @@ export class DetectSprites extends React.Component {
             </div>
         </div>;
     }
-}
+});

app/components/import/ui-import.js

@@ -5,8 +5,7 @@ import { importState } from './state';
 import { Item, Select, Input } from '#ui';
 import { zoomAssert, paletteLineAssert } from '#util/assertions';
 
-@observer
-export class ImportSprites extends React.Component {
+export const ImportSprites = observer(class ImportSprites extends React.Component {
 
     render() {
         const { scale, sprites, spriteIndex, mappings, importWidth, importHeight } = importState;
@@ -147,4 +146,4 @@ export class ImportSprites extends React.Component {
             </div>
         </div>;
     }
-}
+});

app/components/mappings/axis.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
-// import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 import { mappingState } from './state';
 import { VictoryAxis } from 'victory';
-import { white } from '!!sass-variables-loader!#styles/variables.scss';
+import { white } from 'sass-variables';
 
 const style = {
     axis: {stroke: null},
@@ -18,8 +17,7 @@ function tickFormat(t) {
     return t < 0 ? `-0x${h}` : `0x${h}`;
 }
 
-@observer
-export class Axes extends Component {
+export const Axes = observer(class Axes extends Component {
 
     render() {
 
@@ -56,4 +54,4 @@ export class Axes extends Component {
         </g>
     }
 
-}
+});

app/components/mappings/commands.js

@@ -6,8 +6,7 @@ import { commands, getCommandLabel } from '#controls/commands';
 import { mappingState } from './state';
 import { Item } from '#ui';
 
-@observer
-export class Commands extends Component {
+export const Commands = observer(class Commands extends Component {
 
     render() {
         const { baseWidth } = mappingState;
@@ -39,4 +38,4 @@ export class Commands extends Component {
             </Masonry>
         );
     }
-}
+});