בעיה יסודית, בעת שדרוג ספריית רכיב בVUE

chagold

בפרוייקט מסויים שהקליינט שלו הוא VUE, היה רשימה ענקית, והכנסתי אותה לדף עם הרכיב הזה שעושה גלילה וירטואלית לרשימה. (הדגמה)
יש איזו בעיה במה שמותקן אצלי (שלא חשוב לענייננו לפרטה) אז אני רציתי לשדרג לגרסה חדשה בתקוה שהבעיה כבר טופלה.
הבעיה שלי שבגרסה הבאה (v2.3.2) אז כל הדוגמאות שיש באתר שם זה בJS שמותקן עם NPM דהיינו שכותבים אותו על פרוייקט שמופעל ב node.js, ומה אעשה ואני עובד רק על html (בשרת עם PHP)?

השאלה היא יסודית יותר, שאני נתקל בה באינספור מקרים של VUE, שכל הדוגמאות החדשות אינן בjsfiddle.net מהסיבה הזו. איך יש אפשרות לתרגם אותם לשיטת העבודה שאני עובד איתה?

תודה.

יוסף בן שמעון

@chagold אולי האתר הזה עונה על הצורך שלך
https://www.jsdelivr.com/
זה CDN שמשמש את החבילות של NPM
פה החבילה שאתה מחפש
https://www.jsdelivr.com/package/npm/vue-virtual-scroll-list
אולי אפשר גם לעשות את זה פרימטיבי, להוריד את הקובץ מגיטהאב ולהטמיע אותו אצלך בשרת
ואולי באמת לשדרג כבר ל node...

chagold

@יוסף-בן-שמעון פרימיטבי עשיתי את זה, הורדתי את הספריה החדשה והטמעתי אותה. הבעיה שיש חוסר תאימות בקוד ואני לא יודע מה הסינטקט החדש בלי דוגמא

יוסף בן שמעון

https://stackoverflow.com/questions/49330055/how-to-include-a-cdn-to-vuejs-cli-without-npm-or-webpack

yossiz

@chagold בעיקרון אתה עושה את זה ככה:
https://jsitor.com/olq2QEgxv

~~רק שלא הבנתי למה זה לא עובד...~~
עריכה: תקנתי אותו שיעבוד
https://jsitor.com/olq2QEgxv

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-virtual-scroll-list sample</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroll-list@2.3.2/dist/index.js"></script>
</head>

<body>
  <div id="app">
    <ol>
      <virtual-list style="height: 360px; overflow-y: auto;" :data-key="'id'" :data-sources="items" :data-component="itemComponent" />
    </ol>
  </div>
</body>
<script>
  var items = [];
  for (var i = 1; i <= 10000; i++) {
    items.push({
      id: i,
      title: 'item' + i,
    });
  }

  const itemComponent = Vue.component('item-component', {
    props: {
      source: Object
    },
    template: '<li>{{source.title}}</li>'
  });

  new Vue({
    el: "#app",
    data: {
      items,
      itemComponent
    }
  });
</script>

</html>

chagold

@yossiz אחרי התודה הרבה ועצומה,
תוכל להסביר לי מה הרעיון לכתוב Object במקום items? ויותר מכך, איך זה עובד?
תודה.

yossiz

@chagold בודאי בודאי... אני יודע שרק פתרתי את הבעיה הנקודתית ולא הסברתי איך לטפל בזה בעתיד. תכננתי לכתוב פוסט להסביר.
אבל אני צריך לשבת על זה, יש לי חולשה שאני לא יודע לכתוב קצר... וגם שהדברים לא ברורים אצלי ברמה שאני יודע להסביר את זה טוב...

yossiz

@chagold בעיקרון רציתי להסביר לך שאין הבדל כל כך גדול בין שימוש ב-VUE כספרייה בצורה שאתה משתמש בו לבין כתיבת קומפוננטים בקבצי VUE (מה שנקרא SFC - ‏Single File Component) וקימפול על ידי Webpack.
מה שהיה משמע קצת מדברים שנכתבו למעלה כאילו צריך שצד השרת יהיה ב-node לא נכון. VUE ממש לא איכפת לו מה צד השרת. צריך להתקין את נוד רק בשביל הסקריפטים שמקמפלים קבצי VUE לקבצי JS (וכן עבור שאר המעלות של Webpack).
יש יתרון גדול בלעבוד בדרך המקובלת (כמו שאתה יודע בעצמך...) כי כך אפשר בקלות לייבא קומפוננטים אחרים בלי הרבה סיבוכים.

ואני לא משוכנע שלא תוכל לעבוד בצורה זו. אני בינתיים עבדתי על פרוייקט VUE שהיה SPA, אז אני לא מכיר איך עובדים על VUE באתר שבעיקר PHP, אבל זה לכאורה לא יהיה מסובך נורא.

פוסט הבא בעז"ה אסביר את הקוד שלי.

yossiz

@chagold אנסה בקיצור

יש שני דברים ששונים בדרך שאתה משתמש ב-VUE מהדרך ה-Webpack-י, או ה-NPM-י או איך שתקרא לזה.

א. אתה לא יכול לייבא ספרייות/קומפוננטים/תוספים/פלאגינים על ידי התקנה מ-NPM ואז שימוש ב-import x from 'y'‎,
ב. אתה לא יכול לכתוב קומפוננט בקובץ עם סיומת vue.

חוץ מזה זה בדיוק אותו VUE.

בדוגמה של הספרייה שהבאת יש שימוש בשני הדברים.

אז מה החלופות?
נעבור על הדוגמה שם:

npm install vue-virtual-scroll-list --save

החלופה הוא:

<script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroll-list@2.3.2/dist/index.min.js"></script>

(כמו ש@יוסף-בן-שמעון כבר כתב)
אמנם יש בזה כמה נקודות שצריך לשים לב עליהם. א) לייבא את הסקריפט רק אחרי ייבוא ספריית VUE. ב) בגירסה הקודמת הסקריפט עבדה בצורה שהיא ייצרה משתנה גלובלי (כלומר מאפיין של window) בשם VirtualList והיית צריך לקרוא

Vue.component('virtual-list', VirtualList);

כדי לרשום אותו. גירסה זו, הסקריפט עושה את הרישום לבד.
ב) לא כל חבילת NPM עבור VUE יעבוד באותה דרך. צריך לבדוק בתיעוד, ובהעדר תיעוד - בקוד המקור. יש חבילות עם עם סקריפט שונה בספריית dist עבור סביבת דפדפן וסקריפט שונה עבור סביבת NPM/Webpack. ויש חבילות שפשוט לא יעבדו ישר בדפדפן ויצטרכו התאמה ידנית.

שורה הבאה ב-README:

Root component:

מכיון שאתה לא משתמש בקומפוננטים (נכון?) אתה שם את התוכן של ה-<template> ישירות ב-HTML.

עכשיו חלק ה-<script> של הקומפוננט (אתה שם את זה בתגית <script> רגיל)

import Item from './Item'

הסבר: בגירסה הקודמת היית כותב בעצמך את ה-v-for בתוך ה-virtual list. בגירסה זו אתה מעביר לקומפוננט (בתור prop) משתנה מסוג "קומפוננט VUE" וה-virtual list עושה בעצמו את הרינדור.
בשורה הזו הם מייבאים קומפוננט מקובץ VUE כדי להעביר אותו ל-virtual list.
המקביל של זה בצורה שאתה עובד הוא לייצר קומפוננט על ידי קריאה לפונקציית Vue.component ולשמור את התוצאה במשתנה בשם itemComponent.
הקומפוננט הזה שאתה מייצר מרונדר על ידי ה-virtual list, תוך כדי שהוא מעביר לה שתי prop-סים: א) source שזה האייטם הנוחכי ברשימה, וזה prop מסוג Object. וכן פרופ נוסף: index. (אם אתה לא משתמש ב-prop של אינדקס - אין צורך להצהיר עליו, לכן אני הצהרתי רק על ה-prop של source שבו אני עושה שימוש)

הלאה:

import VirtualList from 'vue-virtual-scroll-list'

זה נצרך כדי להצהיר (להלן: components: { 'virtual-list': VirtualList } ) שהקומפוננט עושה שימוש בקומפוננט VirtualList.
מכיון שאתה לא משתמש בקומפוננט זה לא נצרך.
כנ"ל לכל החלק של export default וכו'

הקובץ הבא ב-README הוא ההצהרה על קומפוננט Item. הם עשו את זה בקובץ נפרד, ואני הדגמתי איך עושים את זה inline על ידי קריאה ל-Vue.component.

אוף, יצא קצת ארוך...
האם הכל מובן? תשאל אם לא. אשמח להרחיב יותר אם יש נקודה לא ברורה.

chagold

@yossiz תודה רבה על החפירה עבורי בספריית הקוד מקור ועל ההסבר הבהיר!

@yossiz אמר
א. אתה לא יכול לייבא ספרייות/קומפוננטים/תוספים/פלאגינים על ידי התקנה מ-NPM ואז שימוש ב-import x from 'y'‎,
ב. אתה לא יכול לכתוב קומפוננט בקובץ עם סיומת vue.
חוץ מזה זה בדיוק אותו VUE.

בפרוייקט אחר אני משתמש בhttp-vue-loader. כאן זה לא היה מעשי כ"כ.

@yossiz אמר
תוך כדי שהוא מעביר לה שתי prop-סים: א) source שזה האייטם הנוחכי ברשימה, וזה prop מסוג Object

למעשה גם אם כתוב source: items זה עובד. זה בגלל שהitems כעת ג"כ סוג של אובייקט?
אם נכון ההנחה בשאלה הראשונה, אז למעשה ה:data-sources (בחלק של הhtml) שמפנה לitems, הוא עוקף את הvue ומפנה לאובייקט המקורי. לכן גם בדוגמא הזו אפי' אם הסרתי את המתודות בשורש הvue זה עדיין יעבוד.

אני רק רוצה לדעת שהבנתי נכון.

תודה רבה.

yossiz

@chagold אמר בבעיה יסודית, בעת שדרוג ספריית רכיב בVUE:

למעשה גם אם כתוב source: items זה עובד

אני לא יודע למה זה עובד. בכל מקרה זה לא נכון. עיין https://vuejs.org/v2/guide/components-props.html,
אפשר להגדיר props כמערך של מחרוזות של שמות ה-props או כאובייקט שה-key הוא השם של ה-prop וה-value הוא הטייפ שלו. (יש גם תחביר יותר ארוך שרואים ב-README של הספרייה: source: { type: Object, default () {return {}} } )

@chagold אמר בבעיה יסודית, בעת שדרוג ספריית רכיב בVUE:

אם נכון ההנחה בשאלה הראשונה, אז למעשה ה:data-sources (בחלק של הhtml) שמפנה לitems, הוא עוקף את הvue ומפנה לאובייקט המקורי. לכן גם בדוגמא הזו אפי' אם הסרתי את המתודות בשורש הvue זה עדיין יעבוד.

לא הבנתי את דבריך.

chagold

@yossiz אמר בבעיה יסודית, בעת שדרוג ספריית רכיב בVUE:

@chagold אמר בבעיה יסודית, בעת שדרוג ספריית רכיב בVUE:

אם נכון ההנחה בשאלה הראשונה, אז למעשה ה:data-sources (בחלק של הhtml) שמפנה לitems, הוא עוקף את הvue ומפנה לאובייקט המקורי. לכן גם בדוגמא הזו אפי' אם הסרתי את המתודות בשורש הvue זה עדיין יעבוד.

לא הבנתי את דבריך.

בדוגמא הזו, למרות שאין מתודות באובייקט שורש של הVUE, זה עדיין עובד. הפשט שהוא ניגש ישר לitems.

נ.ב. גם שיניתי שם את המאפיין של הsource.

(לא השתמשתי בjsitor שלך כי עדכון דורס את ההיסטוריה).

yossiz

@chagold אמר בבעיה יסודית, בעת שדרוג ספריית רכיב בVUE:

בדוגמא הזו, למרות שאין מתודות באובייקט שורש של הVUE, זה עדיין עובד.

צודק. חשבתי שזה לא אמור לעבוד. מעניין.

תחומים - פורום חרדי מקצועי

בעיה יסודית, בעת שדרוג ספריית רכיב בVUE