Move class names out of HyperScript into clsx()

Only for virtual DOM nodes that are using clsx().
caleb531 · Aug 21, 2024 · 96d84c3 · 96d84c3
1 parent 8210b4e
commit 96d84c3
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/scripts/components/control.jsx b/scripts/components/control.jsx
@@ -5,8 +5,8 @@ import PanelComponent from './panel.jsx';
 class ControlComponent {
 
   view({attrs: {id, title, icon = null, label = null, action = null, panel = null, panelPosition = 'top'}}) {
-    return m(`div.control.control-${id}`, {
-      class: clsx({'control-has-label': label})
+    return m(`div`, {
+      class: clsx('control', `control-${id}`, {'control-has-label': label})
     }, [
       panel ? m(PanelComponent, {id, position: panelPosition}, panel) : null,
       m('button.control-button', {

diff --git a/scripts/components/export-gif.jsx b/scripts/components/export-gif.jsx
@@ -6,8 +6,8 @@ import ProgressBarComponent from './progress-bar.jsx';
 class ExportGifComponent {
 
   view({attrs: {isExportingGif, exportProgress, isGifExportFinished, exportedImageUrl, abort}}) {
-    return m('div.export-gif-screen', {
-      class: clsx({'visible': isExportingGif || isGifExportFinished})
+    return m('div', {
+      class: clsx('export-gif-screen', {'visible': isExportingGif || isGifExportFinished})
     }, [
       m(ControlComponent, {
         id: 'close-export-gif-overlay',

diff --git a/scripts/components/progress-bar.jsx b/scripts/components/progress-bar.jsx
@@ -5,8 +5,8 @@ class ProgressBarComponent {
 
   view({attrs: {progress = 0}}) {
     return m('div.progress-bar', [
-      m('div.progress-bar-current-progress', {
-        class: clsx({'no-progress': progress === 0}),
+      m('div', {
+        class: clsx('progress-bar-current-progress', {'no-progress': progress === 0}),
         style: {width: `${progress * 100}%`}
       })
     ]);

diff --git a/scripts/components/story-editor.jsx b/scripts/components/story-editor.jsx
@@ -7,8 +7,8 @@ import StoryControlsComponent from './story-controls.jsx';
 class StoryEditorComponent {
 
   view({attrs: {story}}) {
-    return m('div.story-editor', {
-      class: clsx({'story-playing': story.playing})
+    return m('div', {
+      class: clsx('story-editor', {'story-playing': story.playing})
     }, [
 
       m('div.story-stage', [

diff --git a/scripts/components/timeline.jsx b/scripts/components/timeline.jsx
@@ -80,15 +80,15 @@ class TimelineComponent {
       ondragenter: (event) => this.handleFrameDragenter(event, story),
       ondrop: (event) => this.handleFrameDrop(event, story)
     }, story.frames.map((frame, f) => {
-      return m('li.timeline-thumbnail', {
+      return m('li', {
         draggable: true,
         // Keying each thumbnail prevents the canvas redraws from compounding
         key: `timeline-thumbnail-${frame.temporaryId}`,
         // Scroll newly-added frames into view
         oncreate: ({dom}) => this.scrollSelectedThumbnailIntoView(dom),
         // Scroll selected frame into view when navigating frames (Prev/Next)
         onupdate: ({dom}) => this.scrollSelectedThumbnailIntoView(dom),
-        class: clsx({'selected': story.selectedFrameIndex === f}),
+        class: clsx('timeline-thumbnail', {'selected': story.selectedFrameIndex === f}),
         'data-index': f
       }, m(FrameComponent, {
         className: 'timeline-thumbnail-canvas',

diff --git a/scripts/components/update-notification.jsx b/scripts/components/update-notification.jsx
@@ -29,8 +29,8 @@ class UpdateNotificationComponent {
   }
 
   view() {
-    return m('div.update-notification', {
-      class: clsx({ 'update-available': this.isUpdateAvailable }),
+    return m('div', {
+      class: clsx('update-notification', { 'update-available': this.isUpdateAvailable }),
       onclick: () => this.update()
     }, [
       m('span.update-notification-message', 'Update available! Click here to update.')