Diullei/ts2reason

Using project

Closed this issue · 5 comments

idkjs commented

Hey brother. I wanted to play around with this project. I am trying to figure out.

I downloaded this project: https://github.com/reakit/reakit/tree/master/packages/reakit then installed ts2reason with yarn add -D https://github.com/Diullei/ts2reason.git

I then tried running a few different ways with no joy. Would you mind sharing with me how to use it? Thank you.

Here is some output of failed attempt:

reakit node ../../node_modules/ts2reason
internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module '/Users/prisc_000/Downloads/reakit-master/node_modules/ts2reason'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    at internal/main/run_main_module.js:21:11
➜  reakit node ../../node_modules/ts2reason/lib/ts2reason
internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module '../src/Cli.bs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/prisc_000/Downloads/reakit-master/node_modules/ts2reason/lib/ts2reason:1:1)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
➜  reakit node ../../node_modules/ts2reason/lib/ts2reason
internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module '../src/Cli.bs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/prisc_000/Downloads/reakit-master/node_modules/ts2reason/lib/ts2reason:1:1)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
➜  reakit node ../../node_modules/ts2reason/lib/ts2reason

/Users/prisc_000/Downloads/reakit-master/node_modules/ts2reason/node_modules/bs-platform/lib/js/caml_array.js:75
    throw [
    ^
Invalid_argument,-3,index out of bounds
➜  reakit node ../../node_modules/ts2reason/lib/ts2reason /Users/prisc_000/Downloads/reakit-master/packages/reakit/src/index.ts

➜  reakit node ../../node_modules/ts2reason/lib/ts2reason /Users/prisc_000/Downloads/reakit-master/packages/reakit/src/utils/index.ts

➜  reakit node ../../node_modules/ts2reason/lib/ts2reason

/Users/prisc_000/Downloads/reakit-master/node_modules/ts2reason/node_modules/bs-platform/lib/js/caml_array.js:75
    throw [
    ^
Invalid_argument,-3,index out of bounds
➜  reakit node ../../node_modules/ts2reason/lib/ts2reason /Users/prisc_000/Downloads/reakit-master/types/index.d.ts

➜  reakit yarn add -D https://github.com/Diullei/ts2reason.git
idkjs commented

Update. So i built "reakit/reakit:packages/reakit@master" and generated the definitions in packages/reakit/ts/index.d.ts which looks like this:

export * from "./Box";
export * from "./Button";
export * from "./Checkbox";
export * from "./Dialog";
export * from "./Form";
export * from "./Group";
export * from "./Hidden";
export * from "./Menu";
export * from "./Popover";
export * from "./Portal";
export * from "./Radio";
export * from "./Rover";
export * from "./Separator";
export * from "./system";
export * from "./Tab";
export * from "./Tabbable";
export * from "./Toolbar";
export * from "./Tooltip";
export * from "./utils";
export * from "./VisuallyHidden";

Then i ran chmod on the ts2reason file and ran it.

➜  reakit ../../node_modules/ts2reason /Users/prisc_000/Downloads/reakit-master/packages/reakit/ts/index.d.ts
zsh: permission denied: ../../node_modules/ts2reason
➜  reakit chmod u=rwx ../../node_modules/ts2reason/lib/ts2reason 
➜  reakit ../../node_modules/ts2reason/lib/ts2reason  /Users/prisc_000/Downloads/reakit-master/packages/reakit/ts/index.d.ts
../../node_modules/ts2reason/lib/ts2reason: line 1: syntax error near unexpected token `"../src/Cli.bs"'
../../node_modules/ts2reason/lib/ts2reason: line 1: `require("../src/Cli.bs")'
➜  reakit ../../node_modules/ts2reason/lib/ts2reason  /Users/prisc_000/Downloads/reakit-master/packages/reakit/ts/index.d.ts

I figured is a bash script that wasn't reading node runtime so changed to:

#!/usr/bin/env node
require("../src/Cli.bs")

Then ran command again and go no output.

reakit cat /Users/prisc_000/Downloads/reakit-master/node_modules/ts2reason/lib/ts2reason
#!/usr/bin/env node
require("../src/Cli.bs")
➜  reakit ../../node_modules/ts2reason/lib/ts2reason  /Users/prisc_000/Downloads/reakit-master/packages/reakit/ts/index.d.ts

➜  reakit 

Any thoughts? I am thinking i am forgetting to pass some args to command. Let me go check that out.

Thanks again.

idkjs commented

Ok. So the script isn't following import paths from index.d.ts files.

This worked:

reakit ../../node_modules/ts2reason/lib/ts2reason /Users/prisc_000/Downloads/reakit-master/packages/reakit/ts/Box/Box.d.ts  
type t_BoxOptions;

module BoxOptions = {
  type t = t_BoxOptions;
  
  [@bs.get] external getUnstable_system: (t) => option('unknown0) = "unstable_system";
  [@bs.send] external setUnstable_system: (t, 'unknown0) => 'unknown0 = "unstable_system";
}

module BoxHTMLProps = {
  type t = t_TODO;
}

module BoxProps = {
  type t = t_TODO;
}

module UseBox = {
  type t;
  
  [@bs.get] external get__keys: (t) => t_TODO = "__keys";
  [@bs.send] external set__keys: (t, t_TODO) => t_TODO = "__keys";
}

[@bs.val] external useBox: UseBox.t = "";

[@bs.val] external any: 'any0 = "";

[@bs.val] external []: 'any0 = "";

[@bs.val] external box: t_TODO = "Box";


➜  reakit 
idkjs commented

Just to be thorough, these are steps I took to get some output. This is addition to building the target project to generate the typescript definitions as noted above.

  1. In the target directory with the ts.d.ts file i want to run the script on, i run:
    find . -name "*.d.ts" -not -path "./ts/**/*__tests__/*" > tsfile.txt

  2. Create a bash script, ts2re.sh and run chmod u+x ts2re.sh with following content:

#!/usr/bin/env bash

while read p; do
# echo the name of the file currently being processed
  echo $p
# get the basename of the file without the extension to use in generating the reason `.re` filename
  res=$(basename include/"$p" .d.ts)
  # run the `ts2reason` scripts for this project on the current file and out put the results to the same filename with an `.re` extension. I created a `re/` dir in the root and directed the output with new file name to that directory
  ../../node_modules/ts2reason/lib/ts2reason $p > re/$res.re
  # pass the filename you want to loop over after calling done.
done <tsfile.txt

That gets you:

➜  reakit ls re
Box.re                          RadioGroup.re                   isPromise.re
Button.re                       RadioState.re                   isRenderProp.re
Checkbox.re                     Rover.re                        isTouchDevice.re
CheckboxState.re                RoverState.re                   jestSerializerStripFunctions.re
Dialog.re                       Separator.re                    memo.re
DialogBackdrop.re               StaticMenu.re                   mergeProps.re
DialogDisclosure.re             SystemContext.re                mergeSystem.re
DialogState.re                  SystemProvider.re               omit.re
Form.re                         Tab.re                          pick.re
FormCheckbox.re                 TabList.re                      reduceObjects.re
FormGroup.re                    TabPanel.re                     removeIndexFromArray.re
FormInput.re                    TabState.re                     removeItemFromArray.re
FormLabel.re                    Tabbable.re                     setAllIn.re
FormMessage.re                  Toolbar.re                      setIn.re
FormPushButton.re               ToolbarItem.re                  shouldShowError.re
FormRadio.re                    ToolbarSeparator.re             shouldShowMessage.re
FormRadioGroup.re               ToolbarState.re                 splitProps.re
FormRemoveButton.re             Tooltip.re                      supressAct.re
FormState.re                    TooltipArrow.re                 toArray.re
FormSubmitButton.re             TooltipReference.re             types.re
Group.re                        TooltipState.re                 useCreateElement.re
Hidden.re                       VisuallyHidden.re               useDisableHoverOutside.re
HiddenDisclosure.re             __utils.re                      useDisclosureRef.re
HiddenState.re                  createComponent.re              useEventListenerOutside.re
Menu.re                         createHook.re                   useFocusOnHide.re
MenuContext.re                  createOnKeyDown.re              useFocusOnShow.re
MenuDisclosure.re               deepEqual.re                    useFocusTrap.re
MenuGroup.re                    filterAllEmpty.re               useHideOnClickOutside.re
MenuItem.re                     formatInputName.re              useId.re
MenuItemCheckbox.re             forwardRef.re                   useLiveRef.re
MenuItemRadio.re                getFirstInvalidInput.re         useNestedDialogs.re
MenuSeparator.re                getIn.re                        useOptions.re
MenuState.re                    getInputId.re                   usePortalRef.re
Popover.re                      getLabelId.re                   usePreventBodyScroll.re
PopoverArrow.re                 getMessageId.re                 useProps.re
PopoverBackdrop.re              getPushButtonId.re              useSealedState.re
PopoverDisclosure.re            hasMessages.re                  useShortcuts.re
PopoverState.re                 index.re                        useToken.re
Portal.re                       isEmpty.re                      useUpdateEffect.re
Provider.re                     isInteger.re                    useWhyDidYouUpdate.re
Radio.re                        isObject.re                     warning.re
➜  reakit

Hey, sorry for the very long delay to reply, for some reason I didn't see the github notification for this repo. It's nice that you managed to make the script work. I'm not working on this project anymore and the generated types still far from something good to use. So I think, even after you fix your shell script you will not have anything good to use from the generated files.

idkjs commented

@Diullei Thanks for taking the time, boss.