Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 13 19:20

    ArthurClemens on next

    Handle checkbox Set up Cypress tests Fix ARIA attrs for Button and 1 more (compare)

  • May 11 07:36
    dependabot[bot] labeled #101
  • May 11 07:36
    dependabot[bot] opened #101
  • May 11 07:36

    dependabot[bot] on npm_and_yarn

    Bump lodash from 4.17.19 to 4.1… (compare)

  • May 09 18:55
    dependabot[bot] labeled #100
  • May 09 18:55
    dependabot[bot] opened #100
  • May 09 18:55

    dependabot[bot] on npm_and_yarn

    Bump hosted-git-info in /packag… (compare)

  • May 06 22:42
    dependabot[bot] labeled #99
  • May 06 22:42
    dependabot[bot] opened #99
  • May 06 22:42

    dependabot[bot] on npm_and_yarn

    Bump handlebars from 4.7.3 to 4… (compare)

  • May 06 21:30
    dependabot[bot] labeled #98
  • May 06 21:30
    dependabot[bot] opened #98
  • May 06 21:30

    dependabot[bot] on npm_and_yarn

    Bump ua-parser-js from 0.7.19 t… (compare)

  • May 02 15:51

    ArthurClemens on next

    Prevent caching of tab state F… Bump to 1.7.5 Update dependencies and 4 more (compare)

  • Mar 30 15:37
    dependabot[bot] labeled #97
  • Mar 30 15:37
    dependabot[bot] opened #97
  • Mar 30 15:37

    dependabot[bot] on npm_and_yarn

    Bump y18n from 4.0.0 to 4.0.1 … (compare)

  • Feb 14 11:25
    codechips closed #96
  • Feb 14 11:25
    codechips commented #96
  • Feb 14 10:49
    ArthurClemens labeled #96
Arthur Clemens
@ArthurClemens
Because value sets the input value
Carlo Guglielmin
@cgug
In some cases because we're loading a saved record from mongo and need to set it to the field initially
Arthur Clemens
@ArthurClemens
In that case you need defaultValue
Carlo Guglielmin
@cgug
Do you see the caret jump I was talking about in that flems?
Arthur Clemens
@ArthurClemens
I do see it with value, not with defaultValue
Carlo Guglielmin
@cgug
Okay, I'll use defaultValue where necessary, as I agree that fixes it. Thanks!
Arthur Clemens
@ArthurClemens
The documentation of value says: "Input value; this should normally not be set - for instance Safari will move the input to the end of the string at each change"
You basically get conflicting inputs (controlled and non controlled input)
Carlo Guglielmin
@cgug
Yeah my mistake for using value that way
defaultValue doesn't update the field if the service call takes a while to return, even with a redraw, so I might go with the onchange instead (lowercase intentional) since that wasn't jumping, and will just fire on blur instead of input
Arthur Clemens
@ArthurClemens
Correct, defaultValue is the initial value
Carlo Guglielmin
@cgug
Which unfortunately makes it the wrong fit for loading from a db where the property has an existing value beforfehand, but since value has the caret issue, seems like onchange is the workaround
Arthur Clemens
@ArthurClemens
You can also use callback function setInputState using the state object
Carlo Guglielmin
@cgug
Hmm yeah
Probably not worth the clunkiness of having to maintain setInputState for 10+ fields on a complex page
I guess I was hoping TextField could be a drop-in replacement for an HTML input, since there you can set value and oninput without any caret jumping
Arthur Clemens
@ArthurClemens
Carlo Guglielmin
@cgug
Wrapping TextField might be a good alternative, thanks for that example
Arthur Clemens
@ArthurClemens
Instead of using the callback, you could use a more Mithril-like way by storing the dom node once it is available and set the value of the input element
Arthur Clemens
@ArthurClemens
But this only works nicely when there is no initial value, otherwise the field gets visibly re-initialized.
Arthur Clemens
@ArthurClemens
Carlo Guglielmin
@cgug
Any awesome ideas for determining if a page/form is "dirty" and has unsaved changes?
Arthur Clemens
@ArthurClemens
The tests contain an example with Powerform. You can see the result at the bottom of https://arthurclemens.github.io/polythene-demos/mithril/#/textfield
Carlo Guglielmin
@cgug
Back with another one. Thoughts on adding a default keypress/keydown/keyup/keysomething listener on the Button component to "click" it when Spacebar is pressed? Basically like a traditional HTML button. Helps a tiny bit for accessibility too.
Arthur Clemens
@ArthurClemens
Yes that makes sense
Carlo Guglielmin
@cgug
Wow quiet here...
Feature request: could keyboard support be added to some components, such as Tabs and Menu?
Arthur Clemens
@arthurclemens:matrix.org
[m]
The kitchen sink contains a couple of examples of keyboard control: List "Keyboard control" and Search "Search results". This could be generalized.
What's the behavior you're looking for?
Carlo Guglielmin
@cgug
Tabs was the one I was thinking of - if the tabs have focus keyboard left/right moves between them, space/enter selects the tab, that kind of thing
Arthur Clemens
@arthurclemens:matrix.org
[m]
How does the tab get initial focus?
I guess with tabIndex
That way nothing special needs to be build to capture focus
Fox menus it's more tricky, because you need to set the focus to the first item in the list once it is opened
Arthur Clemens
@arthurclemens:matrix.org
[m]
If you go to https://arthurclemens.github.io/polythene-demos/mithril/#/tabs you'll see that using TAB you can move focus from tab to tab
and use ENTER to select it
cheekybuddha
@cheekybuddha

Hello, after a recent npm update I'm suddenly getting problems building my app. Many errors showing:

Can't import the named export 'useState' from non EcmaScript module (only default export is available)

Anyone else seeing this, and any ideas of how to fix?
Let me know if you need more info.
Cheers, d

Messages for each polythene component:
ERROR in ./node_modules/polythene-mithril-ripple/dist/polythene-mithril-ripple.mjs 9:12-20
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
 @ ./node_modules/polythene-mithril/dist/polythene-mithril.mjs
 @ ./js/router.js
Arthur Clemens
@arthurclemens:matrix.org
[m]
Are you using Webpack, and if so, which version?
cheekybuddha
@cheekybuddha
$ npm list --depth=0
clients.londoncarhire.com@0.0.1 /home/dm/Documents/websites/clients.londoncarhire.com
├── @babel/cli@7.13.16
├── @babel/core@7.14.0
├── @babel/plugin-transform-runtime@7.13.15
├── @babel/preset-env@7.14.0
├── @babel/runtime@7.14.0
├── babel-loader@8.2.2
├── comlink@4.3.0
├── mithril@2.0.4
├── polythene-css@1.7.5
├── polythene-mithril@1.7.5
├── powerform@3.1.5
├── webpack-cli@3.3.12
└── webpack@4.46.0
Arthur Clemens
@arthurclemens:matrix.org
[m]
To handle modules in webpack 4, you need a separate loader entry:
{
  type: 'javascript/auto',
  test: /\.mjs$/,
  use: {
    loader: 'babel-loader',
    options: {},
  },
},
cheekybuddha
@cheekybuddha

I have this in my webpack.config.js:

//  webpack.config.js

module.exports = {
  externals: {
     'jquery':     'jQuery',
    'lodash':     'lodash',
    'luxon':      'luxon',
    'moment':     'moment',
    'interact':   'interact',
    'mui':        'mui',
    'exif':       'EXIF',
    'velocity':   'Velocity',
    'Jodit':      'Jodit'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }],
  },
  devtool: 'nosources-source-map'
}

Do I add your object in to rules array, or do I incorporate it into the existing object?

Arthur Clemens
@arthurclemens:matrix.org
[m]
As a separate entry in rules
cheekybuddha
@cheekybuddha

Beautiful! Many thanks you for the swift assistance, and brilliant library!

Out of curiosity, do you know why it suddenly broke? It's been working fine for ages. Has the latest version of polythene-mithril refactored to .mjs?

Arthur Clemens
@arthurclemens:matrix.org
[m]
Thanks for the kind words.
No, there hasn't been a major change. Perhaps one of your bundler dependencies was updated?
cheekybuddha
@cheekybuddha
Must be so. Webpack updates are a nightmare!
Keep up the great work! Thanks again.
d
Arthur Clemens
@arthurclemens:matrix.org
[m]
How bundlers handle modules is still in flux. For webpack 5 you will need
{
  type: 'javascript/auto',
  test: /\.mjs$/,
  resolve: {
    fullySpecified: false,
  },
  use: {
    loader: 'babel-loader',
    options: {},
  },
},
cheekybuddha
@cheekybuddha

Thank you for that, Arthur - I had got too many errors on previous attempts at upgrading to webpack 5. This works (after adjusting my scripts in package.json to:

  "scripts": {
    "build": "webpack",
    "start": "webpack ./js/router.js --output-path ./js/ --output-filename app.js --mode=development --watch"
  },

but I might revert for the time being, since I'm no longer able to build in my original source scripts for debugging (previously devtool: 'nosources-source-map' in webpack.config.js). Now only the transpiled sources are output.