Ember: Upgrade through 43 minor versions, 2 majors, and 2 paradigm shifts #2209

NullVoxPopuli · 2023-09-30T21:01:06Z

Updates the ember version of the todo app to the latest ember conventions.

uses polaris features
utilizes focused component files
still uses routing for choosing between all/active/completed (as routing is a core feature of ember)
persists an array of todos to localStorage

there are some a11y issues, like a lack of <form> when we have form-like behavior, but I don't know how much flexibility the provided CSS gives us

I tried to run the tests according to
these docs: https://github.com/tastejs/todomvc/tree/master/tests

but I got this error:

❯ npm run test-server

> todomvc@0.1.2 test-server
> gulp test-server &


❯ fs.js:42
} = primordials;
    ^

ReferenceError: primordials is not defined

did I do something wrong? as todomvc too out of date? 😅
(like, do I need super old node?)

…, and comes with routig by default

a13o · 2023-10-02T01:20:30Z

I was trying to run this in a codespace but the build keeps crashing. Either Webpack hangs forever

building... [@embroider/webpack]

or it eventually spits this out

SyntaxError: Bad control character in string literal in JSON at position 182711
    at JSON.parse (<anonymous>)
    at /workspaces/todomvc/examples/emberjs/todomvc/node_modules/.pnpm/thread-loader@3.0.4_webpack@5.88.2/node_modules/thread-loader/dist/WorkerPool.js:144:30
    at Socket.onChunk (/workspaces/todomvc/examples/emberjs/todomvc/node_modules/.pnpm/thread-loader@3.0.4_webpack@5.88.2/node_modules/thread-loader/dist/readBuffer.js:40:9)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:343:12)
    at readableAddChunk (node:internal/streams/readable:316:9)
    at Readable.push (node:internal/streams/readable:253:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

NullVoxPopuli · 2023-10-02T02:33:51Z

If you use node 20 or node 18.18, you'll have that issue.

Issue report here: nodejs/node#49911

If you use node > 16 && < 18.18, you'll have success.
If using volta, this'll be chosen for you

examples/emberjs/todomvc/app/routes/active.js

a13o · 2023-10-03T00:30:15Z

I was messing with this tonight to test out the Firefox framework detector stuff. Here's some issues I found

the sourcemaps currently contain a backburner.js.js with duplicate extensions, but the detector looks for /backburner\.js$/ only. does polaris use this name, or is it a config issue in this project?
double clicking doesn't let me edit a todo-item
toggle-all calls repo.save() but i think it wants to call repo.persist(). the change doesn't survive a refresh

NullVoxPopuli · 2023-10-03T01:58:07Z

does polaris use this name, or is it a config issue in this project?

its unrelated to Polaris, backburner.js, on disk, does actually have .js twice. it's weird.

but I think older versions did not? Unsure.

double clicking doesn't let me edit a todo-item
toggle-all calls

Is there a shared test suite for all the implementations?

I think that would help

examples/emberjs/todomvc/app/components/todo-item.gjs

NullVoxPopuli · 2023-10-14T16:57:15Z

@tcjr any other changes you'd like to see?

NullVoxPopuli · 2023-10-14T22:13:17Z

I added some tests!

NullVoxPopuli · 2023-10-14T22:13:53Z

Here is the actual implementation, removing all the boilerplate, if folks want to have something a bit more reviewable: NullVoxPopuli/todomvc-ember-polaris-tests-only#1

flashdesignory

I wasn't able to run the standalone version linked in the comments.

flashdesignory · 2023-12-05T20:38:13Z

examples/emberjs/todomvc/app/components/create.gjs

+
+  @service repo;
+
+  // TODO: we should use a <form> instead of this.


+1, this would be a larger refactor though, since the template as well as the styles package would need to change.

yes, but it would be a correct change

absolutely!
@FadySamirSadek - I know we talked about a11y changes (globally).
Is there already an issue filed? If not, I can file one in the next few days ..

flashdesignory · 2023-12-05T20:38:23Z

examples/emberjs/todomvc/app/components/footer.gjs

+    </footer>
+
+  {{!-- 
+    Looks like the latest todoMVC styles are broken?


nit: what's broken? I think as long as the app looks consistent with the other apps it should be ok.

idk, I'll remove this comment -- it's been too long

NullVoxPopuli · 2023-12-05T20:52:16Z

@flashdesignory

did you update my remote? the work is done

git log should show you:

* 4f3696ac - fix another bug                                                                                     
|               (7 weeks ago) <NullVoxPopuli>
|               HEAD -> upgrade-ember, origin/upgrade-ember

to run:

cd examples/emberjs/todomvc
pnpm i
pnpm start # dev mode

to build for production

cd examples/emberjs/todomvc
pnpm i
rm -rf dist
pnpm build:production # this is what's committed

I've removed a comment that I didn't have enough context on, so your git log should show

* eef5a421 - Remove comment and rebuild                                                                          
|               (16 seconds ago) <NullVoxPopuli>
|               HEAD -> upgrade-ember, origin/upgrade-ember

To run the production / built assets that are pushed in the dist directory

cd examples/emberjs/todomvc/dist
npx http-server # visit http://localhost:8080

flashdesignory · 2023-12-05T21:00:24Z

thanks @NullVoxPopuli for the instructions on how to run! 🙏
I was testing the standalone pr, since that's more isolated.
I'll try this branch with your instructions

flashdesignory · 2023-12-12T20:37:25Z

@NullVoxPopuli - app looks great and your instructions helped!

Found one tiny bug:

NullVoxPopuli · 2023-12-12T20:40:22Z

what's supposed to be the behavior when clicking the toggle-all button when on the completed view?

flashdesignory · 2023-12-12T20:55:28Z

I think the list of displayed todo items should update.
I'm not sure if there's an official behavior, but this is what I've been using for the completed screen:

if there are no active todos in the app, the toggle all should be checked
unchecking the toggle all should remove the items from the completed view (since then the items would not be completed)
if there are no items to display in the current view, the toggle should be disabled (maybe personal preference, but I found it confusing if all the sudden todo items appear).

This is maybe just my opinion and not necessarily the correct one 🤷

…nging the todos, except for the All page -- now all pages update the todos

NullVoxPopuli · 2023-12-12T21:20:50Z

@flashdesignory thanks!

I believe I've fixed it now

Upgrade through 41 minor versions, 2 majors, and 2 paradigm shifts

24f2d15

This was referenced Sep 30, 2023

Upgrade EmberJS to Octane #2103

Closed

Upgrade/Rewrite EmberJS example for Ember Octane #2140

Open

More developer-friendly Ember builds #2208

Open

NullVoxPopuli added 9 commits September 30, 2023 18:26

Progress

1f051f5

Add routes for demonstrating routing, because ember's good at routing…

15ac385

…, and comes with routig by default

Need to import pageTitle

3a241e4

useTabs: true

09494d6

It no longer errors on load

5a85694

done?

ece2432

Update comments

9cde7ca

Compile app in development mode with sourcemaps

a6a3864

Production build is ~50% smaller, and still has sourcemaps

e90520a

NullVoxPopuli changed the title ~~WIP: Ember: Upgrade through 41 minor versions, 2 majors, and 2 paradigm shifts~~ Ember: Upgrade through 41 minor versions, 2 majors, and 2 paradigm shifts Oct 1, 2023

NullVoxPopuli marked this pull request as ready for review October 1, 2023 01:59

lifeart reviewed Oct 2, 2023

View reviewed changes

examples/emberjs/todomvc/app/routes/active.js Outdated Show resolved Hide resolved

lifeart approved these changes Oct 2, 2023

View reviewed changes

Format

1507965

tcjr reviewed Oct 3, 2023

View reviewed changes

examples/emberjs/todomvc/app/components/todo-item.gjs Outdated Show resolved Hide resolved

tcjr reviewed Oct 3, 2023

View reviewed changes

examples/emberjs/todomvc/app/components/todo-item.gjs Show resolved Hide resolved

NullVoxPopuli added 3 commits October 3, 2023 13:26

event.target.closest

252beb0

Fix editing

21d745f

Update dist

0e5122a

lifeart approved these changes Oct 3, 2023

View reviewed changes

Add tests

b3b4087

NullVoxPopuli added 3 commits October 14, 2023 17:39

More tests

1536685

lint

fb0ab39

fix another bug

4f3696a

NullVoxPopuli mentioned this pull request Oct 14, 2023

The completed app NullVoxPopuli/todomvc-ember-polaris-tests-only#1

Open

flashdesignory reviewed Dec 5, 2023

View reviewed changes

Remove comment and rebuild

eef5a42

NullVoxPopuli changed the title ~~Ember: Upgrade through 41 minor versions, 2 majors, and 2 paradigm shifts~~ Ember: Upgrade through 43 minor versions, 2 majors, and 2 paradigm shifts Dec 12, 2023

NullVoxPopuli added 5 commits December 12, 2023 16:10

Upgrade dependencies, bringing us to 43 minors now

e960871

Fix issue where the toggle-all button/checkbox wasn't immediately cha…

7f593de

…nging the todos, except for the All page -- now all pages update the todos

Update build settings

0fc0a74

Use direct imports for helper

6848ad8

Rebuild

5c9bdb4

flashdesignory approved these changes Dec 12, 2023

View reviewed changes

flashdesignory merged commit 5bb801a into tastejs:master Dec 18, 2023

NullVoxPopuli deleted the upgrade-ember branch December 18, 2023 16:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ember: Upgrade through 43 minor versions, 2 majors, and 2 paradigm shifts #2209

Ember: Upgrade through 43 minor versions, 2 majors, and 2 paradigm shifts #2209

NullVoxPopuli commented Sep 30, 2023 •

edited

Loading

a13o commented Oct 2, 2023

NullVoxPopuli commented Oct 2, 2023 •

edited

Loading

a13o commented Oct 3, 2023

NullVoxPopuli commented Oct 3, 2023

NullVoxPopuli commented Oct 14, 2023

NullVoxPopuli commented Oct 14, 2023

NullVoxPopuli commented Oct 14, 2023

flashdesignory left a comment

flashdesignory Dec 5, 2023

NullVoxPopuli Dec 5, 2023

flashdesignory Dec 5, 2023

flashdesignory Dec 5, 2023

NullVoxPopuli Dec 5, 2023

NullVoxPopuli commented Dec 5, 2023 •

edited

Loading

flashdesignory commented Dec 5, 2023

flashdesignory commented Dec 12, 2023

NullVoxPopuli commented Dec 12, 2023

flashdesignory commented Dec 12, 2023

NullVoxPopuli commented Dec 12, 2023


		@service repo;

		// TODO: we should use a <form> instead of this.

Ember: Upgrade through 43 minor versions, 2 majors, and 2 paradigm shifts #2209

Ember: Upgrade through 43 minor versions, 2 majors, and 2 paradigm shifts #2209

Conversation

NullVoxPopuli commented Sep 30, 2023 • edited Loading

a13o commented Oct 2, 2023

NullVoxPopuli commented Oct 2, 2023 • edited Loading

a13o commented Oct 3, 2023

NullVoxPopuli commented Oct 3, 2023

NullVoxPopuli commented Oct 14, 2023

NullVoxPopuli commented Oct 14, 2023

NullVoxPopuli commented Oct 14, 2023

flashdesignory left a comment

Choose a reason for hiding this comment

flashdesignory Dec 5, 2023

Choose a reason for hiding this comment

NullVoxPopuli Dec 5, 2023

Choose a reason for hiding this comment

flashdesignory Dec 5, 2023

Choose a reason for hiding this comment

flashdesignory Dec 5, 2023

Choose a reason for hiding this comment

NullVoxPopuli Dec 5, 2023

Choose a reason for hiding this comment

NullVoxPopuli commented Dec 5, 2023 • edited Loading

flashdesignory commented Dec 5, 2023

flashdesignory commented Dec 12, 2023

NullVoxPopuli commented Dec 12, 2023

flashdesignory commented Dec 12, 2023

NullVoxPopuli commented Dec 12, 2023

NullVoxPopuli commented Sep 30, 2023 •

edited

Loading

NullVoxPopuli commented Oct 2, 2023 •

edited

Loading

NullVoxPopuli commented Dec 5, 2023 •

edited

Loading