gcanti / tcomb-form

Forms library for react
https://gcanti.github.io/tcomb-form
MIT License
1.16k stars 136 forks source link

tcomb <-> tcomb-form #303

Closed simonpure closed 8 years ago

simonpure commented 8 years ago

Hi @gcanti ,

More questions from me :)

You often don't want to use your domain model directly for a form. You can easily create a form specific model with tcomb that captures the details of a particular feature, and then define a function that uses that model to process the main domain model.

I agree with that statement, but having trouble figuring out the best way to:

The simple use cases I'm thinking about are:

Could you point me to some examples to further my understanding?

Thanks!

gcanti commented 8 years ago

Hi @simonpure,

keep things DRY between domain model defined w/ tcomb

Maybe this can be helpful https://github.com/gcanti/tcomb/blob/master/docs/GUIDE.md#keep-the-domain-model-dry

looks like I can just pass in the domain model and the form model will ignore the extra fields

Yep. I can't see particular problems in doing that. However if you want to be extra clean just pass the domain value through the form type in order to filter out the additional fields.

tcomb.Date to a tcomb-form.Date

Actually they are identical, tcomb-form extends tcomb (well, technically tcomb-form re-exports tcomb) and they share the same types.

simonpure commented 8 years ago

Thanks for the helpful response @gcanti!

I'm noticing a different behavior for rendering a date when defining a model using tcom-form vs. tcomb. When using vanilla tcomb, the date field renders as a textbox instead of the date select.

Am I correct that this should result in the same behavior based on your previous reply?

Let me know if you need additional input.

// vanilla.js
import t from 'tcomb'
export default t.struct({
  timestamp: t.date
})

vs.

// form.js
import t from 'tcomb-form'
export default t.struct({
  timestamp: t.date
})
node --version
v4.2.3

// package.json
 "dependencies": {
    "express": "^4.13.4",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "tcomb": "^2.7.0",
    "tcomb-form": "^0.8.2"
  },
  "devDependencies": {
    "babel-cli": "^6.5.1",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "uglifyify": "^3.0.1"
  }
gcanti commented 8 years ago

I'm noticing a different behavior for rendering a date when defining a model using tcom-form vs. tcomb

I guess you have 2 copies of tcomb in node_modules

Try to run

npm list tcomb

in your root folder, you'll probably see another copy of tcomb in node_modules/tcomb-form/node_modules/tcomb-validation/node_modules

simonpure commented 8 years ago

You were correct that I had multiple tcomb copies. Having said that, I'm still seeing the same behavior after deduping when using tcomb vs. tcomb-form.

I'll investigate further and appreciate any additional pointers.

# npm list tcomb
npm info it worked if it ends with ok
npm info using npm@2.14.7
npm info using node@v4.2.3
forms@1.0.0 /usr/src
├── tcomb@2.7.0 
└─┬ tcomb-form@0.8.2
  ├─┬ tcomb-form-templates-bootstrap@0.1.2
  │ └── tcomb@2.7.0 
  └─┬ tcomb-validation@2.3.0
    └── tcomb@2.7.0 

npm info ok 

# npm dedup
npm info it worked if it ends with ok
npm info using npm@2.14.7
npm info using node@v4.2.3
npm info attempt registry request try #1 at 2:32:56 AM
npm http request GET https://registry.npmjs.org/tcomb
npm http 304 https://registry.npmjs.org/tcomb
npm info rm /usr/src/node_modules/tcomb-form/node_modules/tcomb-form-templates-bootstrap/node_modules/tcomb
npm info rm /usr/src/node_modules/tcomb-form/node_modules/tcomb-validation/node_modules/tcomb
npm info ok 

# npm list tcomb
npm info it worked if it ends with ok
npm info using npm@2.14.7
npm info using node@v4.2.3
forms@1.0.0 /usr/src
└── tcomb@2.7.0 

npm info ok 
gcanti commented 8 years ago

Related https://github.com/gcanti/tcomb-form/issues/295

I'm still seeing the same behavior after deduping when using tcomb vs. tcomb-form

This is weird, please make sure you have a clean setup, if you run:

import t from 'tcomb'
import tf from 'tcomb-form'

if (t === tf) {
  console.log('ok!')
}

you should see the successful output.

simonpure commented 8 years ago

I removed the node_modules, re-installed all dependencies and deduped packages -

> const t = require('tcomb')
undefined
> const tf = require('tcomb-form')
undefined
> t === tf
true

But the date field is still rendering as a textfield when importing it from 'tcomb' vs. 'tcomb-form'.

I'll just use 'tcomb-form' for the time being until I figure this out tho.

Thanks for your help and attention!

gcanti commented 8 years ago

But the date field is still rendering as a textfield when importing it from 'tcomb' vs. 'tcomb-form'.

This is really disappointing, I don't get what's going on. In my setup everything is fine and I see the correct behaviour with both the exports.

I'll just use 'tcomb-form' for the time being until I figure this out tho.

Ok, let me know if you need some help (maybe you could post your actual code)

simonpure commented 8 years ago

Thanks!

This is really disappointing, I don't get what's going on.

Human error :) It's working as expected now.

I must have been dealing with some stale cache somewhere in the browserify, babelify, uglify transformation.

Your original comment about deduping multiple tcomb imports should have resolved the issue.