Hey guys, I was checking the docs, but I can't find a way to use a function in the dat

Sounds like we should add webpack support to dna.js. <p dir="auto

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Notes: The <a href="https://webpack.js.org/plug

Proposed addition to the API: <div class="snippet-clipboard-content notranslate po

I really like the new addition <a class="user-mention notranslate" data-hovercard-type

Use non global functions from templates about dna-engine HOT 9 CLOSED

dna-engine commented on July 2, 2024

Use non global functions from templates

from dna-engine.

Comments (9)

dpilafian commented on July 2, 2024

Sounds like we should add webpack support to dna.js.

I've not yet experimented with webpack. How do you access functions? Are functions namespaced off of global instead of window?

Possibly somewhat related, a few minutes ago support for Node.js module loading (issue #29) was pushed out in v1.2.2 so that require can be used like:

var window = require('jsdom').jsdom('<html></html>').defaultView;
var $ =      require('jquery')(window);
var dna =    require('dna.js')(window, $);

console.log(dna.util.toKebab('accountNumber'));  //outputs: "account-number"

Of course, window is still being used, but it's being passed in after being created by jsdom.

from dna-engine.

dpilafian commented on July 2, 2024

Update... I created a sample project to import dna.js using webpack.

Right now I'm encountering the error:
TypeError: __WEBPACK_IMPORTED_MODULE_0_dna_js___default.a.info is not a function. (In '__WEBPACK_IMPORTED_MODULE_0_dna_js___default.a.info()', '__WEBPACK_IMPORTED_MODULE_0_dna_js___default.a.info' is undefined)

Looks like I need to make window and jQuery available plus some other stuff:
https://webpack.github.io/docs/shimming-modules.html

from dna-engine.

santios commented on July 2, 2024

@dpilafian This is a working dna-webpack starter. https://github.com/santios/dnajs-webpack-starter. Let me know if that helps.

I don't see a good way to expose the class methods to the window. Whats your opinion on doing something like this:

import $ from 'jquery';
import dnaFactory from 'dna.js';
const dna = dnaFactory(window, $);

export default class PageA {
  constructor() {
    this.addTodo = this.addTodo.bind(this);
  }
  render() {
    /* Add this guy to the api
     * dna.registerEvents(template, object)
     */
    dna.registerEvents('todo', {
      addTodo: this.addTodo
    });

    dna.clone('todo', { title: 'Todo One' });
    dna.clone('todo', { title: 'Todo Two' });
  }

  addTodo(ev) {
    dna.clone('todo', { title: 'new todo' });
  }
}

const page = new PageA();
page.render();

from dna-engine.

dpilafian commented on July 2, 2024

The above commit should support registering page:

dna.registerContext('page', page);

...so its member functions can be called:

<button data-click=page.addTodo>Add To Do</button>

Alternatively, a function can be registered by itself:

dna.registerContext('addTodo', page.addTodo);

...and called with:

<button data-click=addTodo>Add To Do</button>

from dna-engine.

dpilafian commented on July 2, 2024

Notes:

The webpack ProvidePlugin may also solve the problem with something like plugins: [new webpack.ProvidePlugin({ page: 'page' })] to effectively make page global. Or maybe expose-loader.
The name registerContext() seems reasonable since a function or an entire entry point may be registered. Or maybe registerEventContext() should be the name.
Events might be associated with a specific template or used anywhere even outside of a template.

from dna-engine.

dpilafian commented on July 2, 2024

Proposed addition to the API:

dna.registerContext(contextName, contextObjectOrFunction)

Is there a better approach? Can we improve this?

from dna-engine.

santios commented on July 2, 2024

I really like the new addition @dpilafian. I also think the name is good. I will test this soon. Thanks!

from dna-engine.

dpilafian commented on July 2, 2024

To make it easier to test, the API change has been pushed out with release 1.2.3 (documentation won't be updated until we're sure this works).

from dna-engine.

dpilafian commented on July 2, 2024

http://dnajs.org/docs/#setup-webpack

from dna-engine.

Use non global functions from templates about dna-engine HOT 9 CLOSED

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent