fix ts errors when remix-sdk client is imported

[kronkm]

Fixing type errors that are thrown when the remix-sdk client exports are pulled into a project with stricter tsconfig options and imported via:

import { useFlags } from 'node_modules/remix-sdk/src/client';

My project is using typescript@4.7.4. Right now, projects with stricter TS settings can throw these errors:

1:

node_modules/remix-sdk/src/client/ldBrowser.tsx:1:8 - error TS6133: 'React' is declared but its value
is never read.

1 import React, { Component, ReactNode } from 'react';
         ~~~~~

2, 3, 4:

node_modules/remix-sdk/src/client/ldBrowser.tsx:14:13 - error TS2339: Property 'ssrFlags' does not
exist on type 'Window & typeof globalThis'.

14     const { ssrFlags, clientSideID, ldUser } = window;
               ~~~~~~~~

node_modules/remix-sdk/src/client/ldBrowser.tsx:14:23 - error TS2339: Property 'clientSideID' does not
exist on type 'Window & typeof globalThis'.

14     const { ssrFlags, clientSideID, ldUser } = window;
                         ~~~~~~~~~~~~

node_modules/remix-sdk/src/client/ldBrowser.tsx:14:37 - error TS2339: Property 'ldUser' does not
exist on type 'Window & typeof globalThis'.

14     const { ssrFlags, clientSideID, ldUser } = window;
                                       ~~~~~~

5:

node_modules/remix-sdk/src/shared/context.ts:13:30 - error TS1205: Re-exporting a type
when the '--isolatedModules' flag is provided requires using 'export type'.

13 export { Provider, Consumer, LDContext };

[kronkm]

Fix for issue 1 - removing React on line 1 above fixes the issue, but eslint will flag the line below.

[kronkm]

Fix for issue 5.

[kronkm]

Fix for issues 2, 3, and 4. For some reason, tsc isn't able to access the globals.d.ts file in this project when client is pulled in.

[kayakyakr]

publishing the package to npm would probably solve these type issues, but this helps for now.

[kronkm]

@yusinto tagging you for review! For some reason I can't edit the assignees

[yusinto]

@kronkm thanks for this! I'll review this soon.

[yusinto]

stricter tsconfig options

@kronkm are you able to share your strict tsconfig.json so I can reproduce these errors please? We have some work to improve the build for this remix sdk to make it more consumable and I want to make sure these PR is in line with that. Thank you.

[kronkm]

stricter tsconfig options

@kronkm are you able to share your strict tsconfig.json so I can reproduce these errors please? We have some work to improve the build for this remix sdk to make it more consumable and I want to make sure these PR is in line with that. Thank you.

Sure thing! Here ya go, and running "typescript": "^4.6.4":

{
    "include": ...,
    "exclude": ...,
    "compilerOptions": {
        "lib": ["DOM", "DOM.Iterable", "ES2019"],
        "isolatedModules": true,
        "esModuleInterop": true,
        "jsx": "react-jsx",
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "target": "ES2019",
        "skipLibCheck": true,
        "allowJs": true,
        "checkJs": false,
        "strict": true,
        "baseUrl": ".",
        "paths": {
            "~/*": ["./app/*"]
        },
        // Type checking rules and constraints
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strictFunctionTypes": true,
        "strictNullChecks": true,
        // Remix takes care of building everything in `remix build`.
        "noEmit": true
    }
}

[yusinto]

@kronkm these are issues arising due to your application consuming the src files directly. If you run yarn build at the root of the repo, this will run typescript and produce a lib folder. This lib folder should be the one your application references when importing the remix sdk. The remix-sdk package.json specifies explicit exports that maps to this lib folder. You should be able to import the remix-sdk's exports like the example app:

// this 
import { useFlags } from 'remix-sdk/client';

This way most of the errors you see should go away. Please note we are seeing these errors because it's hard to use the remix-sdk because it's not published on npm yet. Once published, these problems should also go away. We hope to do this soon.