The readme states "Closure Components are currently only supported as part of the tree, not directly as argumend to mq function". Can you give an example of what is and isn't acceptable?

It's currently a bit awkward to use in a browser without a bundler already set up, so I was wondering if you could start publishing a browser bundle distribution that I could point users to.

For context, I was going to include a "Running in browsers" section for the rewritten testing docs (soon to be published), but I don't want to include it with nothing to point to, and I want it to be easy to get started with.

I'm getting around this by manually calling view(ctrl) after the event but ideally this would behave like Mithril.

Just wanted to say I love this library. Thanks for writing it 😊

It's not possible to query the child with reference to it's parent. div.parent > div.child when the child node lives in a separate component that starts with a array.

const component1 = {
  view: function() {
    return m('div.comp1', m(component2))
  },
}

const component2 = {
  view: function() {
    return [
      m('div.comp2')
    ] // without this array all is good.
  },
}

describe('', function() {
  it('should be able to query children within leading array component', function() {
    let output = mq(m(component1))
    output.should.have('.comp1') // yep
    output.should.have('.comp2') // all good
    output.should.have('.comp1 .comp2') // Nope!
  })
})

I'll give it a shot on trying to solve this issue, but I'm not 100% confident i will be able to solve it right now.

Hi @StephanHoyer I've been reviewing the source in order to implement class components, and the way m.render/m.redraw are implemented is not very accurate.

Rather than rewriting the whole thing, I was wondering if we couldn't instead rely on m.render(), some kind of DOM library (injectable, so that jsdom can be used optionally if the Mithril mocks don't cut it for someone) and cssauron-html?

After renderComponents() is removed, It looks like there's little code that's vdom specific beside the language() parser and the select() function.

That approach would ensure feature parity with Mithril, and allow to support more complex components that manipulate their DOM in hooks.

Edit: Looking a bit deeper into this, the removers feature couldn't be replicated, but we could instead add a api.remove() method that would m.render(root, []), thereby triggering the removal phase.

Edit2: the event handling code would also need some love. Another breaking change would be the fact that api.rootNode would be a DOM tree rather than a vDOM tree. Some workaround would be needed if the root component returns an array.

While i was logging inside the children function for the cssauroun implementation there looks to be nothing that tests that the sibling function behaves as expected.

Adjacent sibling: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
General sibling: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

describe('traverse from a parent to its children for sibling selectors', function() {
  it('adjacent sibling combinator ', function() {
    let output = mq(m('div', [
      m('div.first'),
      m('div.second')
    ]))

    output.should.have('.first + .second')
  })

  it('general sibling combinator', function() {
    let output = mq(m('div', [
      m('span'),
      m('p'),
      m('span'),
      m('a'),
      m('span')
    ]))

    expect(output.find('p ~ span').length).toEqual(2)
  })
})

This simple tests validate that the implementation indeed works as intended 👍

var el = mq(m('ul', [
  m('li', ['foo']),
]));

console.log(el.contains('foo')); // true
console.log(el.has('li:contains(foo)')); // false
console.log(el.has('li :contains(foo)')); // true

I would expect the second example to still resolve to true, this could be confusing for users.

var el = mq(m('ul', [
  m('li', [['foo']]),
]));

console.log(el.has('li > #:contains(foo)')); // true
console.log(el.has('li:contains(foo)')); // false

Looks like it thinks # is the parent, true for vnode but not for html.

Trying to get to the bottom of Mithril issue 2642, it looks like Mithril Query is re-executing the component closure on every draw.

As per title, mithril query fails to render components that are passed custom style properties via mithril js syntax. For instance, declaring a component with mq such as:

const someComp = mq(someComp, { attr1: true, attr2: false, style: {"--testVar": 12}});

or within the component view such as:

return m("some-name", { style: { "--testVar": 12}}, [childrenHere...]);

...will cause the following error when running tests

TypeError: Cannot read properties of undefined (reading 'type')

However, setting up the same functionality in the same way, but adding the properties via js inside the component view()/oncreate() causes no issues.

document.querySelector(".someComp").style.setProperty("--testVar", 12);

``

'first' is throwing errors when no results are found. This results in other functions not returning the expected result. For instance when using the 'contains' function, if the value is not contained in the vdom then an error is thrown rather than 'false' being returned.

out.contains(string) – Returns true if any element in tree contains the string, otherwise false.

Updating the contains function to utilize 'find' rather than 'first resolves this issue.

function contains (value, node) { return !!(find(':contains(' + value + ')', node).length); }

Documentation shows passing an event as the 3rd argument on key events, but that object is being treated as an option object and can only override certain props on the event object.

keypress should take an additional argument to pass event overrides:
out.keydown(selector, keycode, [event], [silent])

Running on node v0.12.4 npm test gives:

17 passing
15 failing

tests. All the failing tests fail with the same error call stack:

TypeError: Cannot assign to read only property 'parent' of Test
  at index.js:108:22
  at Array.forEach (native)
  at matches (index.js:107:36)
  at find (index.js:82:44)

Hello, I am trying to use mithril-query with types but it looks like the latest version on NPM (4.0.1) doesn't include the types property in package.json. I'm not sure what commit built it, but could you push a new version to NPM with the current code in master?

For now, I'm using "mithril-query": "git+https://github.com/mithriljs/mithril-query.git#facf7ce" in my package.json and it works OK.

When searching through VNode children, a boolean value can cause unexpected results.

If the boolean is true (Ex. node.children === true), the short-circuit logic will interpret the children property as being truthy and continue past this check and then attempts to perform array function calls.
(line 179)
if (!node.children || isStringOrNumber(node.children)) { return foundNodes }

Adding a new isBoolean function and modifying the short-circuit logic should prevent this and return the expected results.

function isBoolean (thing) { return typeof thing === "boolean"; } ... if (isBoolean(node.children) || isStringOrNumber(node.children)|| !node.children) { return foundNodes }

Community health files are stuff like CONTRIBUTING.md, FUNDING.yml, and so on, stuff that normally lives in .github, docs/, or the repo's root. I've added default files for everything on this list of supported file types except for a CONTRIBUTING.md file, as that process varies pretty greatly across repos. For issue templates, there's two templates: one for bugs and one for feature requests. The pull request template and issue templates are each derived from the core project's own core templates but with core-specific stuff omitted.

No action is required on your part, but you may wish to customize these appropriately and/or take other related action in light of this like adding/removing issue templates.

If you have any questions, comments, or concerns, please file an issue and I'd be more than willing to address them.

https://github.com/fgnass/domino

    return isArray(node.children) ? node.children.filter(isString).concat('') : '';

may need to be

    return isArray(node.children) ? node.children.filter(isString).join('') : '';

Hey guys,

    const openClass = '.acc-open-item';

    test('should toggle item on click', () => {
        test(Accordion.should.not.have(openClass)).equals(true);
        Accordion.click('#acc-item-0 > a');
        test(Accordion.should.have(1, openClass)).equals(true);
        Accordion.click('#acc-item-0 > a');
        test(Accordion.should.not.have(openClass)).equals(true);
    });

Accordion > should toggle item on click:
Wrong count of elements that matches ".acc-open-item"
  expected: 1
  actual: 0
    at Object.shouldHave [as have] (/Users/fabian/Workspace/design-komponenten/accordion/node_modules/mithril-query/index.js:103:13)
    at /Users/fabian/Workspace/design-komponenten/accordion/tests/accordion.test.js:29:31

I just did a npm update and afterwards the click events in my testing code don't fire anymore. The changelog from version 3 to 4 does not say anything about changed behavior. What do I have to do to get my tests passing with success?

https://www.npmjs.com/package/linkedom

maybe check if it's faster than domino

When using the rewrite branch mq is not running component oninit function for nested components.

My simple guess is that in https://github.com/StephanHoyer/mithril-query/blob/rewrite/index.js#L106
states[treePath] is already defined and therefore oninit is never triggered.

test('component', function(t) {
    var result = {
        oninit: 0,
        view: 0,
    };

    var component = {
        oninit: function() {
            result.oninit++;
        },
        view: function(vnode) {
            result.view++;
            return m("div.test", vnode.children);
        },
    };

    mq(
        m(component, [
            m(component, [
                m(component), // <-- oninit is not running for this component.
            ]),
        ])
    );

    t.equal(result.oninit, result.view, 
        'oninit should run before every view');

    t.end();
});

When using an ES6 class style component, I get an error like:

Sample > should have a div:
Class constructor Sample cannot be invoked without 'new'

Reproduction example:

global.window = require("mithril/test-utils/browserMock.js")()
global.document = window.document

var m = require("mithril") // version 1.1.1
var mq = require('mithril-query') // version 2.2.0
var o = require("mithril/ospec/ospec")

class Sample {
    constructor(vnode) {
	this._text = vnode.attrs.text
    }

    view() {
	return m("div", this._text)
    }
}


o.spec("Sample", function() {
    o("should have a div", function() {
	var output = mq(Sample, {text: "Text"})
	output.should.have(1, "div")
    })
})

It looks like mq only accepts a component or a component + attrs: https://github.com/MithrilJS/mithril-query/blob/master/index.js#L245

In theory, it should be able to support component, component + attrs, or component + attrs + children (MyComponent, attrs, children)?

Just started learning Mithril 1.1.1 few days ago and went with https://mithril.js.org/components.html#closure-components - those are however not supported by mq.

Description:

vnode.state is not copied from vnode.tag when Mithril 1.0.0 "rewrite" is running in node.

Steps to Reproduce:

Using this gist: https://gist.github.com/magnusleo/ac28737dd659db6465d9db47ab54495b

npm test

My test was run with node v5.9.1 on Mac OS X 10.11.5, installed using http://brew.sh/

Expected:

The test runs flawlessly.

Actual:

component.js:15
                return m('li', {onclick: vnode.state.clickCurry(i)}, item); // Fails in node
                                                    ^

TypeError: Cannot read property 'clickCurry' of undefined

When I call redraw from mithril-query, mithril logs this error:

Don't reuse attrs object, use new object for every redraw, this will throw in next major

This was once in the docs

onunload-handling

If you use the auto-rendering feature mentioned above you might want to also
call onunload to on the controller response after testing. We added a
reference to the controller onunload function to the result of the mithril query
function.

var module = {
  controller: function () {
    return {
      onunload: function () {
        //clean up stuff
      }
    }
  },
  view: function (scope) {
    // do what ever
  }
}

var $out = mq(module)
$out.onunload() // calls upper defined onunload on the controller result

Hey! Here's my simple testing setup. It gives me an error TypeError: Cannot set property 'value' of undefined at Object.setValue. What am I missing?

const mq = require('mithril-query')
const m = require('mithril')

const Component = {
    view () {
      this.input = m('input')
      return m('div', this.input)
    },
    setValue (value) {
      this.input.dom.value = value
    }
}

describe('Component', function() {
  const out = mq(Component)
  it('displays correct value after `setValue` call', function() {
    out.vnode.state.setValue('test')
  });
});

In some cases the :contains directive is not working as expected.

Example:

const out = mq(myComponent);
out.should.have('.button :contains(foo)'); // will return 0 elements, also the button is there

const out = mq(myComponent);
mq(out.first('.button')).should.contain('foo'); // will work however

In other case the :contains directive is working as expected.

https://github.com/featurist/browser-monkey

Because of declaring variables as const here, tests are failing when they are ran in IE or phantom.js. We would need to transpile or revert them back to var.