How to (old fasion) javascript library with lucky import?

[zw963]

I have been struggling with how to introduce a js library for several days and I am very frustrated.

Following is a example.

I use this javascript library for select province/city in China.

Basically, only three file is needed.

1. https://www.pengwf.com/iosselect/demo/three/areaData_v2.js
2. iosSelect.css
3. iosSelect.js

the first file copied into src/js, and the last two file added by yarn add iosselect into node_modules, like following directory structure:

src/
├── js/
│  └── areaData_v2.js

...

├── node_modules/
│  ├── iosselect/
│  │  ├── src/
│  │  │  ├── iosSelect.css
│  │  │  └── iosSelect.js
│  │  ├── LICENSE
│  │  ├── package.json
│  │  └── README.md

areaData_v2.js define the province/city list in China, use two variable iosProvinces and iosCitys.
iosSelect.js define a iosSelect function, those two variable and function will be used on specified page of my project,
in the <script> ... </script> tag, like this:

<script>
tag.addEventListener('click', function () {
  var iosSelect = new IosSelect([iosProvinces, iosCitys]);
});
</script>

css file can be import successful use @import 'iosselect/src/iosSelect.css'; in src/css/app.scss.

But, The really issue is, i don't know how to import variable iosProvinces, iosCitys and function IosSelect, make it available
in the <script> ... </script> tag.

The only working solution is, copy those files into public folder, then add js_link directly in the page, but i consider this is
not the correct way to work with js package, right?

I have little knowledge about use import in ES6, anyone can help me, thanks a lot!

[jwoertink]

You should have a src/js/app.js file. In this file you should see

/* eslint no-console:0 */

// Rails Unobtrusive JavaScript (UJS) is *required* for links in Lucky that use DELETE, POST and PUT.
// Though it says "Rails" it actually works with any framework.
import Rails from "@rails/ujs";
Rails.start();

// Add this line
import IosSelect from "iosselect";

// now use the library like normal
var data=[{'id': '10001', 'value': '演示数据1'},{'id': '10002', 'value': '演示数据2'}];
var showDom = document.querySelector('#showDom');// 绑定一个触发元素
var valDom = document.querySelector('#valDom');  // 绑定一个存储结果的元素
showDom.addEventListener('click', function () {  // 添加监听事件
    var val = showDom.dataset['id'];             // 获取元素的data-id属性值
    var title = showDom.dataset['value'];        // 获取元素的data-value属性值
	// 实例化组件
    var example = new IosSelect(1,               // 第一个参数为级联层级，演示为1
        [data],                             // 演示数据
        {
            container: '.container',             // 容器class
            title: '演示标题',                    // 标题
            itemHeight: 50,                      // 每个元素的高度
            itemShowCount: 3,                    // 每一列显示元素个数，超出将隐藏
            oneLevelId: val,                     // 第一级默认值
            callback: function (selectOneObj) {  // 用户确认选择后的回调函数
                valDom.value = selectOneObj.id;
                showDom.innerHTML = selectOneObj.value;
                showDom.dataset['id'] = selectOneObj.id;
                showDom.dataset['value'] = selectOneObj.value;
            }
    });
});

[zw963]

It works!! thank you.

Wired, i tried many times like this before, but probably on another several package, and it often give me message like this:

 _scroll_select_js__WEBPACK_IMPORTED_MODULE_2__.go is not a function

e.g. this js package, it defined a variable like following only.

var scrollSelect = { ... }

so, if i want to use scrollSelect function in app.js like this, could you please help me on how to import that?

document.getElementById('input3').addEventListener('click',function(e){
    scrollSelect.go({
        level:3,
        el:'input3',
        type:'calendar'
    })
})

---

I guess same issue apply into areaData_v2.js too, can i import iosProvinces and iosCitys to use it in app.js like this?

[jwoertink]

Some javascript packages may not be fully compatible with module imports. For those packages that you can't use with webpack, you can create a special directory in your public/ like say public/vendor/js/scrollSelect.js or whatever. Then in your layout

js_link("/vendor/js/scrollSelect.js")

Or you can also do

script src: "https://cdn.js.something/scrollSelect.js"

I would only suggest this if import scrollSelect from "scrollSelect"; does not work.

[zw963]

Thank you very much, your great answer give me inspiration.

For the areaData_v2.js, there is one more solution, because i use this file locally, so, i can change it to compatible with module imports, use following step:

1. Add following to end of package file

// ...
    {"id":"659002","value":"阿拉尔市","parentId":"659002"},
    {"id":"659003","value":"图木舒克市","parentId":"659003"},
    {"id":"659004","value":"五家渠市","parentId":"659004"}
];

export {
    iosProvinces,
    iosCitys,
    iosCountys
}

Then import it from app.js, like this:

import { iosProvinces, iosCitys } from './areaData_v2.js';
import IosSelect from "iosselect";