Feat Vue3 and Typescript #78

stefnotch · 2022-07-20T06:43:13Z

This is what the Vue 3 upgrade would look like.

Big changes that you'll probably notice

We've got a contributing guide now, check out CONTRIBUTING.md
No more Webpack, instead Vite is all the rage these days. It uses Esbuild under the hood, in case you're curious.
Vue 2 used the so called "options API". Vue 3 introduced the "composition API" and "script setup". Those are some super new concepts, since they basically change how the basic structure of the code looks. If you look at the files changed and scroll down, you'll find a few Vue files which have been changed.
Typescript
Vuex has been replaced by Pinia
The environment variables have been renamed a bit
There's an updated, and unused .proto file which is actually compatible with protobuf 3. Shoutout to CyberChef for making this somewhat easy. I think it might be worthwhile to fix all the protobuf stuff at some point.
We're now generating Javascript code and Typescript typings from the protobuf file.
There is a Typescript-y and more convenient IPC wrapper, with some type definitions in electron/ipc.ts
The flags code has been refactored a fair bit, braincells should be a bit happier now
Fix Ability to save the bank #26
Saving and loading a Javascript object from/to the disk. For saving larger banks, we either have to change the format to be an incremental one, or split it over multiple files, or use a proper database.

and some more stuff

Surprisingly not big changes

Newer Electron version
- Though at this point I'm debating the viability of Electron, due to issues like Support Node's ES Modules electron/electron#21457 , the developer tools currently being slow to open, attempting to use sqlite is painful, ...

One thing that I didn't touch, but am curious about: Should we use style scoped? https://vue-loader.vuejs.org/guide/scoped-css.html

Update Vue code More vue upgrading Upgrade Hm Stuff So many tweaks Somewhat okay

stefnotch

Another thing you'll notice: Everything has been formatted with Prettier.

https://prettier.io/

stefnotch · 2022-07-20T06:46:20Z

.env

@@ -0,0 +1,2 @@
+VITE_APP_HOSTNAME=noita-together.unicast.link
+VITE_APP_WS_PORT=6969


I probably shouldn't commit the .env file?

Also, those are the renamed env variables

stefnotch · 2022-07-20T06:47:12Z

.eslintrc.js

+    "@typescript-eslint/no-explicit-any": "off",
+    "linebreak-style": "off",
+  },
+};


Note that there's a second .eslintrc.js file in the src folder.

stefnotch · 2022-07-20T06:47:42Z

.gitattributes

@@ -0,0 +1,2 @@
+# Use LF everywhere
+* text eol=lf


Gotta have those sane line endings. The Windows style "carriage return" line endings are weird.

stefnotch · 2022-07-20T06:48:26Z

.vscode/extensions.json

+		"Vue.volar",
+		"Vue.vscode-typescript-vue-plugin"
+	]
+}


Those are the currently recommended Visual Studio Code plugins for working with Vue.
The old one, Vetur, isn't recommended anymore.

stefnotch · 2022-07-20T06:48:42Z

CONTRIBUTING.md

+
+
+master branch: Electron app
+mod branch: Noita together mod


Look, we got a bit of documentation!

stefnotch · 2022-07-20T07:14:28Z

src/components/vFooter.vue

+
+const version = ref("");
+ipcRenderer.invoke("get-version").then((v) => (version.value = v));


Oh, and beforeMount just isn't needed anymore. You just slap whatever you want to do right in the code and done.

stefnotch · 2022-07-20T07:15:55Z

src/components/vRoomFlags.vue

+function randomizeSeed() {
+  const seed = Math.floor(Math.random() * 4294967295) + 1;
+  payload.value.world.sync_world_seed.value = seed;


The hack here has been replaced with something nicer

stefnotch · 2022-07-20T07:16:48Z

src/components/vUserTooltip.vue

+  <div class="info-wrapper" v-if="user">
+    <!-- TODO show personal alert for user -->
+    <Popper :hover="true" :interactive="true" class="info">


Instead of manually doing tooltips, I just used that library.

stefnotch · 2022-07-20T07:18:48Z

src/store/index.ts

+  };
+};
+
+const useStore = defineStore("store", () => {


The store now looks way more like those new Vue components do.

The state is just a reactive (and refs can also be used)

Getters are computed()

Mutations are plain old functions, and are an obsolete concept

Actions are plain old functions

stefnotch · 2022-07-20T07:19:26Z

src/store/index.ts

+
+  function commit(type: keyof typeof mutations, payload) {
+    return mutations[type](payload);
+  }


This commit function and the one below only exists so that I didn't have to refactor quite as much. Eventually it can be removed.

keytar has been removed from externals?

Am about to have fun

Required fields are not allowed in proto3.

stefnotch · 2022-07-22T16:04:20Z

public/messages.proto

-        required bool locked = 7;
-    }
+syntax = "proto3";
+package NT;


What has changed in the protobuf file?
Well, first I had to move the syntax statement to the first line, so that it would get parsed at all.
Then, I had to shift nearly every single identifier by 1, so that nothing starts with zero.
And then I removed every single required, since proto3 apparently doesn't support those anymore.

The changes have been moved to a messages-updated.proto file. ^

to this monstrosity

Not sure if I like this yet

stefnotch · 2022-07-30T16:51:42Z

One thing about the current design that I find odd is that the frontend store seems to duplicate some parts of noita.
Like the flags
https://github.com/soler91/noita-together/blob/master/src/noita.js#L40
https://github.com/soler91/noita-together/blob/master/src/store/index.js#L197

stefnotch · 2022-08-02T09:15:29Z

Another tidbit that should probably be implemented: A loaded successfully message.

soler91 · 2022-08-03T06:51:09Z

i appreciate the effort put into this, but i'd rather keep on the versions of tooling i'm familiar with so I can continue maintaining this project. could you pull the feature changes out into a separate PR that uses the current versions of tooling?

stefnotch · 2022-08-03T07:33:14Z

@soler91 Sure, I can do that. Though, I'll point out that the Typescript part of the tooling does let one catch a lot of mistakes. (See: Discord)
For instance, the fact that the current flags code worked at all was more luck than anything else.

The protobuf part is also pretty cursed at the moment, I'd love it if you could take a look at that eventually.

The Vue composition API is mainly in there, because it works slightly better with Typescript, and admittedly due to personal preferences. I could change that part back to the options API.

I can replace Pinia with Vuex again, shouldn't make much of a difference.

Replacing Webpack with Vite, upgrading Electron builder, etc. should all be rather unnoticeable changes.

stefnotch · 2022-08-18T16:58:59Z

For posterity, there are a few bugfixes in this PR as well

Function not being called due to typo

I found another cursed little bug that has evaded detection so far.
Right here we've got a capital S

noita-together/public/messages.proto

Line 62 in 1583ecf

ServerPlayerSecretHourglass S_player_secret_hourglass = 33;

This is probably a typo. And that leads to

noita-together/src/noita.js

Line 385 in 1583ecf

sPlayerSecretHourglass(payload) {

probably not getting called.

Modifying the default flags

The room flags code sometimes just returns the default flags

noita-together/src/store/index.js

Lines 242 to 255 in 5fb4d5a

    
           flags: (state) => { 
        
               const mode = state.room.gamemode 
        
               const fDefaults = state.defaultFlags[mode] 
        
               return fDefaults.map(flag => { 
        
                   const found = state.roomFlags.find(f => f.id == flag.id) 
        
                   if (!found && flag.type == "boolean") { 
        
                       return { ...flag, value: false } 
        
                   } 
        
                   else if (found) { 
        
                       return flag 
        
                   } 
        
                   else { return undefined } 
        
               }).filter(v => typeof v !== "undefined") 
        
           }

This can actually be observed: https://discord.com/channels/813249109208334386/813254974447419402/999373131904978965

Create a room
Turn a few flags off
Leave the room
Create a new room
Instead of using the default settings, this new room now uses the changed flags

And also, it modifies the object returned by a Vue computed. This seems questionable to say the least.

noita-together/src/components/vRoomFlags.vue

Line 119 in 5fb4d5a

flags.death[flag].value = true

Double escaping

The double escaping is probably really hard to observe, especially since the game doesn't aggressively throw errors.

noita-together/src/noita.js

Line 162 in 5fb4d5a

toGame(obj = {}) {

Anyways, what happens there is:

Let's input something like { event: "UpdateFlags" }
JSON.stringify gets called and gives us the string "{\"event\":\"UpdateFlags\"}"

   const evt = JSON.stringify(obj)

If there's no client, then we push it into the queue. So now the queue has "{\"event\":\"UpdateFlags\"}"

if (!this.client) {
            //console.log("[Game] Pushed code to queue.")
            this.queue.push(evt)
            return
        }

...
4. toGame is called again, and this time a client exists. We get to the final bit of code where our thingy is taken out of the queue and then we call toGame with it.

if (this.queue.length > 0) {
            setTimeout(() => {
                this.toGame(this.queue.shift())
            }, this.queueDelay)
        }

toGame gets called with..."{\"event\":\"UpdateFlags\"}" . Yeah, that's a string.
JSON.stringify, and we get a double-stringified thingy. "\"{\\\"event\\\":\\\"UpdateFlags\\\"}\""

Invalid protobuf file

The canonical protobuf implementation doesn't accept the protobuf file.
The documentation confirms some of the illegal bits: https://developers.google.com/protocol-buffers/docs/proto3

syntax = "proto3"; is the second line, which is wrong. It should be the first line

noita-together/public/messages.proto

Line 2 in 5fb4d5a

syntax = "proto3";

The first line of the file specifies that you're using proto3 syntax: if you don't do this the protocol buffer compiler will assume you are using proto2. This must be the first non-empty, non-comment line of the file.
-- https://developers.google.com/protocol-buffers/docs/proto3#simple

I'm guessing it's actually a proto2 file right now, since proto3 has other differences such as required not existing anymore protocolbuffers/protobuf#2497

And many of the field numbers start with zero, which doesn't seem to be legal either

The smallest field number you can specify is 1, and the largest is [...]
-- https://developers.google.com/protocol-buffers/docs/proto3#assigning_field_numbers

stefnotch · 2022-08-18T17:00:37Z

Anyways, I'll leave this pull request open indefinitely, but I wouldn't expect this to get merged anytime soon (or ever).

stefnotch · 2022-11-17T18:24:08Z

(Oh neat, protobuf-ts is closer to being nice to use https://github.com/timostamm/protobuf-ts . They fixed one pretty big issue with the whole oneof stuff.)

stefnotch · 2023-03-08T16:04:52Z

(Interesting, there is this ORM https://github.com/drizzle-team/drizzle-orm )

stefnotch added 3 commits July 20, 2022 08:40

Halfway done with the upgrade

2651c14

Update Vue code More vue upgrading Upgrade Hm Stuff So many tweaks Somewhat okay

CRLF to LF

c074ebf

Add missing stuff

9727371

stefnotch commented Jul 20, 2022

View reviewed changes

stefnotch added 15 commits July 20, 2022 09:46

Typescript go brr

7d33ad3

More modernizing

27c642c

Minor tweaks

21fcb7d

Funky flags

491dd7c

More fixes

ac3c027

keytar has been removed from externals?

Fix electron builder mistakes

ec3b4bf

Figured out why env variables were cursed

174668a

Fix build

1233a7c

Improve build type checking

03485cf

Improve builds

28ed818

Fix queue

adf534e

Minor tweaks

e203fce

Am about to have fun

Try out protobuf stuff

6f7a04d

Shift .proto Ids

755502d

Remove required .proto fileds

dd04712

Required fields are not allowed in proto3.

stefnotch commented Jul 22, 2022

View reviewed changes

stefnotch added 10 commits July 22, 2022 21:50

Protobuf Typescript WIP

dbad750

Back to protobufjs

80a2678

Trying out types

06e2a8b

Sleek JSON doesn't work, so we're back

b2b11b2

to this monstrosity

Add old messages.proto

84e93ed

Improve room creation

309af29

Improve message handler type

fb261f9

Refactoring

bcc46b0

Refactor flags

ce878a0

Not sure if I like this yet

Fix death flag

9aa9463

stefnotch added 4 commits July 28, 2022 18:41

Prevent illegal imports

f03eda4

Move IPC stuff around

6ed1d09

Refactor gamemode a bit

998a8bd

Start with game saving

ce3e130

stefnotch changed the title ~~Feat vue3~~ Feat Vue3 and Typescript Jul 29, 2022

stefnotch added 9 commits July 29, 2022 11:48

Implement gold saving

72124b2

Save game flags

4a7b330

Save the bank

9479cbd

Fix gitattributes

cb09c19

Loading the bank

5e02704

Fix wrong type

9f52c62

Fix flags bug

affdb77

Disgusting room flags loading workaround

4110f03

Fix build

bd8e6c3

stefnotch marked this pull request as ready for review July 29, 2022 15:28

stefnotch added 5 commits July 29, 2022 17:58

Update contributing guide

965323a

More contributing guide stuff

bd3d90d

Add todo comments

2a3e7e2

Add more Typescript types

d3ef915

Bump dependencies

adaec1b

Fix bank sending

144c742

stefnotch mentioned this pull request Jun 19, 2023

Update vue Noita-Together/noita-together#19

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat Vue3 and Typescript #78

Feat Vue3 and Typescript #78

stefnotch commented Jul 20, 2022 •

edited

Loading

stefnotch left a comment

stefnotch Jul 20, 2022

stefnotch Jul 21, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 20, 2022

stefnotch Jul 22, 2022

stefnotch Jul 23, 2022

stefnotch commented Jul 30, 2022

stefnotch commented Aug 2, 2022

soler91 commented Aug 3, 2022

stefnotch commented Aug 3, 2022 •

edited

Loading

stefnotch commented Aug 18, 2022

stefnotch commented Aug 18, 2022

stefnotch commented Nov 17, 2022 •

edited

Loading

stefnotch commented Mar 8, 2023

		@@ -0,0 +1,2 @@
		VITE_APP_HOSTNAME=noita-together.unicast.link
		VITE_APP_WS_PORT=6969


		const version = ref("");
		ipcRenderer.invoke("get-version").then((v) => (version.value = v));

Feat Vue3 and Typescript #78

Are you sure you want to change the base?

Feat Vue3 and Typescript #78

Conversation

stefnotch commented Jul 20, 2022 • edited Loading

stefnotch left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stefnotch commented Jul 30, 2022

stefnotch commented Aug 2, 2022

soler91 commented Aug 3, 2022

stefnotch commented Aug 3, 2022 • edited Loading

stefnotch commented Aug 18, 2022

Function not being called due to typo

Modifying the default flags

Double escaping

Invalid protobuf file

stefnotch commented Aug 18, 2022

stefnotch commented Nov 17, 2022 • edited Loading

stefnotch commented Mar 8, 2023

stefnotch commented Jul 20, 2022 •

edited

Loading

stefnotch commented Aug 3, 2022 •

edited

Loading

stefnotch commented Nov 17, 2022 •

edited

Loading