namespace gsap / Webflow Vite Template

[milko]

Hello everybody!

I am working on a Vite / JavaScript / Webflow template so it's easier to use JavaScript inside Webflow, and of course GSAP.

I have GSAP as a dependency (thank you GS 😍), but when trying to call gsap this namespace gsap is the first one that pops up, so when hitting 'tab' to expand & auto-import, nothing happens. Now you'd say this is not a real problem, and you would be right, but I love better developer experience, and I want to make it easier for non-import-modules guys to get started easily.


My jsconfig.json  looks like this:

{
  "compilerOptions": {
    "target": "ES2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "removeComments": true /* Strict Type-Checking Options */,
    "strict": true /* Enable all strict type-checking options. */,

    /* Additional Checks */
    "verbatimModuleSyntax": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "resolveJsonModule": true,

    /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,

    /* Advanced Options */
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ /* Do not emit comments to output. */
  }
}

There are a couple of options which I don't totally understand -
I saw it in a similar TypeScript/Webflow template (taken from tsconfig.json), where calling gsap popped the gsap library & auto-autoimport in the first position of the expanded menu (pic 2)


Edit*: adding vite.config.js  code in case it's needed.

import { defineConfig } from "vite";
import eslint from "vite-plugin-eslint";
import InjectHMRPlugin from "./config/vite-plugin-inject-hmr.js";
import RedirectRootRequestsPlugin from "./config/vite-plugin-redirect-root-requests.js";

export default defineConfig(({ command }) => {
  let config = {
    // Shared configuration across all modes
    resolve: {
      alias: {
        // Make root ("/") point to "src" folder
        "/": "src",
      },
    },
    optimizeDeps: {
      exclude: ["jquery"],
    },
    server: {
      host: "localhost",
      port: 3000,
    },
    build: {
      rollupOptions: {
        // Direct string paths without path.resolve
        input: {
          main: "./src/main.js",
          about: "./src/about.js",
        },
        external: ["jquery"],
      },
    },
    // ...other shared configurations...
  };

  // Extend config for development environment
  if (command === "serve") {
    config = {
      ...config, // keep the shared config
      plugins: [InjectHMRPlugin(), RedirectRootRequestsPlugin(), eslint()],
      server: {
        ...config.server, // keep the shared server config
        hmr: {
          port: 3000, // Can be omitted if it's the same as server port
        },
      },
    };
  }

  return config;
});

Thank you GreenSock team! 
❤️
 

[GreenSock]

Gosh, I wish I had an answer for you but I'm not at all an expert in various IDEs, TypeScript, or the type of code hinting intricacies you bring up there. We're happy to answer any GSAP-specific questions here, of course. This seems more like a question related to your coding environment configuration and how it handles code hinting, right? I wonder if it's more of a StackOverflow type of question(?)

 

Maybe someone else around here has ideas for you to try. 🤞

[milko]

It's okay Jack! Hopefully somebody will stumble upon this 😁🥰