switch to esm javascript module imports

espial.cabal

@@ -52,8 +52,6 @@ extra-source-files:
     static/js/app.min.js.gz
     static/js/app.min.js.map
     static/js/app.min.js.map.gz
-    static/js/html5shiv.min.js
-    static/js/html5shiv.min.js.gz
     static/js/js.cookie-2.2.0.min.js
     static/js/js.cookie-2.2.0.min.js.gz
     purs/Makefile

purs/package.json

@@ -6,8 +6,8 @@
     "purs": "purs",
     "make-install": "make install",
     "make-watch": "inotifywait -m -r -q -e close_write --format '%T %w%f' --timefmt '%T' src | while read FILE; do echo $FILE; make; done",
-    "esbuild-bundle": "esbuild ./output/Main/index.js --bundle --format=iife --global-name=PS --target=chrome58,firefox57,edge18 --outfile=dist/app.js",
-    "esbuild-bundle-min": "esbuild ./output/Main/index.js --bundle --format=iife --global-name=PS --target=chrome58,firefox57,edge18  --minify --sourcemap --outfile=dist/app.min.js"
+    "esbuild-bundle": "esbuild ./output/Main/index.js --bundle --format=esm --target=chrome61,firefox60,edge18 --outfile=dist/app.js",
+    "esbuild-bundle-min": "esbuild ./output/Main/index.js --bundle --format=esm --target=chrome61,firefox60,edge18  --minify --sourcemap --outfile=dist/app.min.js"
   },
   "devDependencies": {
     "esbuild": "^0.19.11",

src/Foundation.hs

@@ -87,6 +87,8 @@ instance Yesod App where
              then sslOnlyMiddleware session_timeout_minutes
              else id) handler
 
+    jsAttributes _ = [("type", "module")]
+
     defaultLayout widget = do
         req <- getRequest
         master <- getYesod
@@ -123,14 +125,15 @@ instance Yesod App where
       |]
 
 
+
 isAuthenticated :: Handler AuthResult
 isAuthenticated = maybeAuthId >>= \case
                     Just authId -> pure Authorized
                     _ -> pure $ AuthenticationRequired
 
 addAppScripts :: (MonadWidget m, HandlerSite m ~ App) => m ()
-addAppScripts = do
-  addScript (StaticR js_app_min_js) 
+addAppScripts = do pure ()
+  -- addScriptAttrs (StaticR js_app_min_js) [("type","module")] 
 
 
 -- popupLayout

src/Handler/AccountSettings.hs

@@ -14,8 +14,10 @@ getAccountSettingsR = do
         app.userR = "@{UserR (UserNameP $ userName user)}";
         app.dat.accountSettings = #{ toJSON accountSettings } || []; 
     |]
-    toWidget [julius|
-      PS.renderAccountSettings('##{rawJS accountSettingsEl}')(app.dat.accountSettings)();
+    toWidget [hamlet|
+      <script type="module">
+        import { renderAccountSettings } from '@{StaticR js_app_min_js}'
+        renderAccountSettings('##{accountSettingsEl}')(app.dat.accountSettings)();
     |]
 
 postEditAccountSettingsR :: Handler ()

src/Handler/Add.hs

@@ -25,8 +25,10 @@ getAddViewR = do
     toWidgetBody [julius|
       app.dat.bmark = #{ toJSON (fromMaybe formurl mformdb) }; 
     |]
-    toWidget [julius|
-      PS.renderAddForm('##{rawJS renderEl}')(app.dat.bmark)();
+    toWidget [hamlet|
+      <script type="module">
+        import { renderAddForm } from '@{StaticR js_app_min_js}'
+        renderAddForm('##{renderEl}')(app.dat.bmark)();
     |]
 
 bookmarkFormUrl :: Handler BookmarkForm

src/Handler/Notes.hs

@@ -39,8 +39,10 @@ getNotesR unamep@(UserNameP uname) = do
         app.dat.notes = #{ toJSON notes } || [];
         app.dat.isowner = #{ isowner };
     |]
-    toWidget [julius|
-      PS.renderNotes('##{rawJS renderEl}')(app.dat.notes)();
+    toWidget [hamlet|
+      <script type="module">
+        import { renderNotes } from '@{StaticR js_app_min_js}'
+        renderNotes('##{renderEl}')(app.dat.notes)();
     |]
 
 getNoteR :: UserNameP -> NtSlug -> Handler Html
@@ -63,8 +65,10 @@ getNoteR unamep@(UserNameP uname) slug = do
         app.dat.note = #{ toJSON note } || [];
         app.dat.isowner = #{ isowner };
     |]
-    toWidget [julius|
-      PS.renderNote('##{rawJS renderEl}')(app.dat.note)();
+    toWidget [hamlet|
+      <script type="module">
+        import { renderNote } from '@{StaticR js_app_min_js}'
+        renderNote('##{renderEl}')(app.dat.note)();
     |]
 
 getAddNoteSlimViewR :: Handler Html
@@ -85,8 +89,10 @@ getAddNoteViewR unamep@(UserNameP uname) = do
         app.noteR = "@{NoteR unamep (noteSlug (entityVal enote))}";
         app.dat.note = #{ toJSON enote } || [];
     |]
-    toWidget [julius|
-      PS.renderNote('##{rawJS renderEl}')(app.dat.note)();
+    toWidget [hamlet|
+      <script type="module">
+        import { renderNote } from '@{StaticR js_app_min_js}'
+        renderNote('##{renderEl}')(app.dat.note)();
     |]
 
 deleteDeleteNoteR :: Int64 -> Handler Html

src/Handler/User.hs

@@ -62,13 +62,15 @@ _getUser unamep@(UserNameP uname) sharedp' filterp' (TagsP pathtags) = do
         app.userR = "@{UserR unamep}";
         app.tagCloudMode = #{ toJSON $ tagCloudMode } || {};
     |]
-    toWidget [julius|
-      setTimeout(() => {
-        PS.renderBookmarks('##{rawJS renderEl}')(app.dat.bmarks)();
-      }, 0);
-      setTimeout(() => {
-        PS.renderTagCloud('##{rawJS tagCloudRenderEl}')(app.tagCloudMode)();
-      }, 0);
+    toWidget [hamlet|
+      <script type="module">
+        import { renderBookmarks, renderTagCloud } from '@{StaticR js_app_min_js}'
+        setTimeout(() => {
+          renderBookmarks('##{renderEl}')(app.dat.bmarks)();
+        }, 0);
+        setTimeout(() => {
+          renderTagCloud('##{tagCloudRenderEl}')(app.tagCloudMode)();
+        }, 0);
     |]
 
 -- Form

templates/default-layout-wrapper.hamlet

@@ -17,10 +17,6 @@ $newline never
 
     ^{pageHead pc}
 
-    \<!--[if lt IE 9]>
-    \<script src="@{StaticR js_html5shiv_min_js}"></script>
-    \<![endif]-->
-
     <script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, 'js');
     <script src="@{StaticR js_js_cookie_2_2_0_min_js}">
     <script>
@@ -36,3 +32,7 @@ $newline never
         };
   <body .f6.dark-gray.helvetica>
     ^{pageBody pc}
+
+  <script type="module">
+    import { logoutE } from '@{StaticR js_app_min_js}';
+    Array.from(document.getElementsByClassName('logout-btn')).forEach(_ => _.addEventListener('click', (e) => logoutE(e)()));

templates/default-layout.hamlet

@@ -18,7 +18,7 @@
           <a .link href="@{AddNoteViewR (UserNameP userName)}">add note&nbsp;&nbsp;
           <a .link href="@{NotesR (UserNameP userName)}">notes&nbsp;&nbsp;
           <a .link href="@{AccountSettingsR}">settings&nbsp;&nbsp;
-          <a .link onclick="PS.logoutE(event)()" href="@{AuthR LogoutR}">
+          <a .link.logout-btn href="@{AuthR LogoutR}">
               log out
         $nothing
           <a .link href="@{AuthR LoginR}">

templates/popup-layout.hamlet

@@ -5,7 +5,7 @@
       - (#{userName})
   <div .fr>
     $maybe userName <- musername
-      <a .link onclick="PS.logoutE(event)()" href="@{AuthR LogoutR}">
+      <a .link.logout-btn href="@{AuthR LogoutR}">
         [log out]
     $nothing
       <a .link href="@{AuthR LoginR}">