fix: typescript support for marko 4 (#2041)

package.json

@@ -142,7 +142,7 @@
     },
     "dependencies": {
         "@marko-tags/subscribe": "^0.5.1",
-        "@floating-ui/core": "^1.5.2",
+        "@floating-ui/dom": "^1.5.2",
         "makeup-active-descendant": "0.6.1",
         "makeup-expander": "~0.10.1",
         "makeup-floating-label": "~0.3.2",

scripts/generate-cdn.js

@@ -5,12 +5,12 @@ import * as https from "https"; // or 'https' for https:// URLs
 import { fileURLToPath } from "url";
 import * as fs from "fs";
 import * as path from "path";
-import rimraf from "rimraf";
+import * as rimraf from "rimraf";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const rootDir = path.join(__dirname, "..");
-const versionPath = "src/common/cdn/versions.json";
+const versionPath = "src/common/cdn/versions.ts";
 
 const cdnConfig = {
     shaka: {
@@ -37,9 +37,11 @@ function updateVersionFile(version) {
         {
             "//": "This is a generated file. Run generateCDN script file to update",
         },
-        version
+        version,
     );
-    const newVersion = JSON.stringify(versionObject);
+    const newVersion = `export const versions = ${JSON.stringify(
+        versionObject,
+    )};`;
     fs.writeFileSync(versionFile, newVersion);
 }
 
@@ -70,29 +72,29 @@ async function shakaGenerator({ version, cdnVersionPath }) {
     await download(getShakaCSSUrl(version), cdnVersionPath, "controls.css");
     // Remove define
     execSync(
-        `sed -i '' -e 's/typeof define=="function"/typeof define=="w"/' ${cdnVersionPath}/shaka-player.ui.js`
+        `sed -i '' -e 's/typeof define=="function"/typeof define=="w"/' ${cdnVersionPath}/shaka-player.ui.js`,
     );
 }
 
 async function threeDPlayerGenerator({ cdnVersionPath }) {
     await fs.promises.cp(
         `${rootDir}/node_modules/@google/model-viewer/dist/model-viewer.min.js`,
-        `${cdnVersionPath}/model-viewer.min.js`
+        `${cdnVersionPath}/model-viewer.min.js`,
     );
 }
 
 async function highchartsGenerator({ cdnVersionPath }) {
     await fs.promises.cp(
         `${rootDir}/node_modules/highcharts/highcharts.js`,
-        `${cdnVersionPath}/highcharts.js`
+        `${cdnVersionPath}/highcharts.js`,
     );
     await fs.promises.cp(
         `${rootDir}/node_modules/highcharts/modules/accessibility.js`,
-        `${cdnVersionPath}/accessibility.js`
+        `${cdnVersionPath}/accessibility.js`,
     );
     await fs.promises.cp(
         `${rootDir}/node_modules/highcharts/modules/pattern-fill.js`,
-        `${cdnVersionPath}/pattern-fill.js`
+        `${cdnVersionPath}/pattern-fill.js`,
     );
 }
 

scripts/prepublish.js

@@ -10,7 +10,10 @@ const componentInputDir = path.join(rootDir, "src/components");
 
 // run typescript compiler
 execSync("mtc");
-execSync("babel --env-name prod dist --out-dir dist --copy-files");
+// Rename all exports.default to module.exports
+execSync(
+    "find dist -type f -name 'component*.js' | xargs sed -i '' 's/exports.default =/module.exports =/g'",
+);
 
 // create top level browser.json files to map to nested ones
 fs.readdirSync(componentInputDir)

src/common/cdn/index.ts

@@ -1,5 +1,5 @@
 import { loader } from "../loader";
-import versions from "./versions.json";
+import { versions } from "./versions";
 const MAX_RETRIES = 3;
 
 interface CDNLoaderConfig {

src/common/cdn/versions.json → src/common/cdn/versions.ts

@@ -1,4 +1,4 @@
-{
+export const versions = {
     "//": "This is a generated file. Run generateCDN script file to update",
     "shaka": "4.3.2",
     "highcharts": "10.2.1",

src/components/components/ebay-tooltip-overlay/component-browser.ts

@@ -1,9 +1,5 @@
 import type { AttrClass } from "marko/tags-html";
-export const typeRoles = {
-    tourtip: "region",
-    tooltip: "tooltip",
-    infotip: "tooltip",
-} as const;
+import {typeRoles} from './constants'
 
 interface TooltipOverlayInput {
     toJSON?: any;

src/components/components/ebay-tooltip-overlay/constants.ts

@@ -0,0 +1,5 @@
+export const typeRoles = {
+    tourtip: "region",
+    tooltip: "tooltip",
+    infotip: "tooltip",
+} as const;

src/components/components/ebay-tooltip-overlay/index.marko

@@ -1,5 +1,5 @@
 import { processHtmlAttributes } from "../../../common/html-attributes";
-import { typeRoles } from "./component-browser";
+import { typeRoles } from "./constants";
 
 static function noop() {}
 

src/components/ebay-button/component-browser.ts

@@ -1,6 +1,5 @@
 import * as eventUtils from "../../common/event-utils";
-
-export const validSizes = ["large", "small"] as const;
+import { validSizes } from "./constants";
 
 export interface ButtonEvent<T extends Event> {
     originalEvent: T;

src/components/ebay-button/constants.ts

@@ -0,0 +1 @@
+export const validSizes = ["large", "small"] as const;

src/components/ebay-button/index.marko

@@ -1,5 +1,5 @@
 import { processHtmlAttributes } from "../../common/html-attributes"
-import { validSizes } from "./component-browser"
+import {validSizes} from "./constants"
 
 static function toJSON(this: any) {
     return {

src/components/ebay-carousel/index.marko

@@ -58,7 +58,6 @@ $ var config = data.config;
                         class=item.class
                         style=item.style
                         aria-hidden=!item.fullyVisible && 'true'
-                        no-update-body-if=!!config.preserveItems
                     >
                         <${item.renderBody}/>
                     </li>

src/components/ebay-filter-menu-button/index.marko

@@ -13,7 +13,7 @@ $ const {
     formAction,
     formMethod,
     items,
-    type,
+    type: inputType,
     ...htmlInput
 } = input;
 
@@ -40,7 +40,7 @@ $ const {
     <ebay-filter-menu
         classPrefix="filter-menu-button"
         variant=variant
-        type=type
+        type=inputType
         formName=formName
         formAction=formAction
         formMethod=formMethod
@@ -58,10 +58,10 @@ $ const {
                 ${footerText}
             </@footer>
         </if>
-        <else-if(footer)>
+        <else><if(footer)>
             <@footer ...footer a11yFooterText=(a11yFooterText || footer.a11yFooterText)>
                 <${footer.renderBody}/>
             </@footer>
-        </else-if>
+        </if></else>
     </ebay-filter-menu>
 </span>

src/components/ebay-listbox/index.marko

@@ -10,7 +10,7 @@ $ const {
     ...htmlInput
 } = input;
 
-$ var selectedOption = (options as Option[])?.[state.selectedIndex];
+$ var selectedOption = (options as Option[])[state.selectedIndex];
 
 <div
     ...processHtmlAttributes(htmlInput)

src/components/ebay-menu-button/style.ts

@@ -1,2 +1 @@
 import "@ebay/skin/menu-button";
-import "./ebay-menu-button.css";

tsconfig.json

@@ -9,17 +9,17 @@
     "compilerOptions": {
         "allowSyntheticDefaultImports": true,
         "incremental": true,
-        "lib": ["dom", "ESNext"],
-        "module": "ESNext",
-        "moduleResolution": "bundler",
+        "lib": ["dom"],
+        "module": "commonjs",
+        "moduleResolution": "node",
         "noImplicitOverride": true,
         "noUnusedLocals": true,
         "outDir": "dist",
         "resolveJsonModule": true,
         "rootDir": "src",
         "skipLibCheck": true,
         "strict": true,
-        "target": "ES6",
+        "target": "ES2015",
         "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
     }
 }