feat(*): adding jQuery samples#85
Open
ChronosSF wants to merge 3 commits into
Open
Conversation
Co-authored-by: Copilot <copilot@github.com>
…o sstoychev/implement-jquery-samples
…o sstoychev/implement-jquery-samples
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces support for jQuery sample embeds in the docs widget pipeline and migrates many legacy DocFX embed-sample blocks to the newer <Sample> MDX component format.
Changes:
- Add a jQuery-specific code service to
sample-widget.ts, including a JSFiddle “Edit in” flow. - Extend platform resolution to consider
DOCS_PLATFORMfor build-time platform context selection. - Add a migration script and apply
<Sample>conversions across many jQuery docs pages (plus adddemosBaseUrlto jQueryenvironment.json).
Reviewed changes
Copilot reviewed 77 out of 78 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/scripts/sample-widget.ts | Adds JSFiddle footer support and a new JQueryCodeService for fetching jQuery sample source files. |
| src/lib/platform-context.ts | Adds DOCS_PLATFORM as an additional platform resolution input. |
| scripts/migrate-embed-samples.mjs | New CLI script to convert legacy embed-sample blocks to <Sample> components. |
| docs/jquery/src/content/en/environment.json | Adds demosBaseUrl for jQuery sample hosting. |
| docs/jquery/src/content/en/topics/general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/general-and-getting-started/getting-started.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igupload/working-with-igupload/using-client-side-events.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igtreegrid/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igtree/event-reference.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igsplitter/handling-events.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igsparkline/binding-to-data.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igradialgauge/configuring/labels.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igpivotgrid/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igpivotgrid/configuration.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igpiechart/databinding.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igmap/data-binding-igmap.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igmap/configuring/features/visual-features.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iglayoutmanager/adding.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/ightmleditor/working/modifying-contents-programmatically.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/ightmleditor/working/angularjs-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/initializing.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/configuring-knockout-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/bind/binding-to-local-data.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-configuring.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/updating/updating.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/updating/row-template/roweditdialog.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/updating/implementing-paste-from-excel.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/tooltips/using-tooltips.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/selection/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/row-selectors/configuring-row-selectors.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-creating-custom-profile.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-vertical-column-rendering.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-single-column-template.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-bootstrap-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/paging.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/multirowlayout.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/jsrender-integration.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/feature-chooser.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/configuring-knockout-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/sorting/overview.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/grouping/groupby-overview.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns/filtering.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/columns-and-layout.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/advanced.mdx | Migrates legacy embed-sample but contains accidental stray content that needs cleanup. |
| docs/jquery/src/content/en/topics/controls/iggrid/features/append-rows-on-demand-overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/binding/iggrid-to-xml.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-javascript-array-and-json-array.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-html-table-data.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igfunnelchart/binding-to-data.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igeditors/igdatepicker/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igeditors/igdateeditor/overview.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igeditors/config/localizing-igeditors.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igeditors/config/configuring-knockout-support-editors.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/styling/the-chart-series.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/overview/visual-elements.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/configuring/series-highlighting.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/configuring/navigation-features.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/configuring/knockoutjs-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/motion-framework.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx | Normalizes heading spacing/formatting. |
| docs/jquery/src/content/en/topics/controls/igcombo/configuring/knockoutjs-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igcombo/configuring/angularjs-support.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igcombo/binding/data-binding.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-tooltips.mdx | Migrates legacy embed-sample to <Sample> and adds import. |
| docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx | Migrates legacy embed-sample blocks to <Sample> and adds import. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+507
to
+511
| const sourceUrl = meta.srcUrlPattern | ||
| ? `https://github.com${meta.srcUrlPattern | ||
| .replace('${owner}', 'IgniteUI') | ||
| .replace('${repo}', 'help-samples')}` | ||
| : null; |
There was a problem hiding this comment.
sourceUrl is computed but never used. With the project using astro/tsconfigs/strict, this will fail the TypeScript build due to noUnusedLocals. Either remove it, or use it (e.g., wire it into a "View on GitHub" action/link).
Comment on lines
+447
to
+450
| let samplePath = getSamplePath(iframeSrc, demosBaseUrl); | ||
| // Strip trailing filename (e.g. index.html) to get the directory path. | ||
| samplePath = samplePath.replace(/\/[^/]+\.[^/]+$/, ''); | ||
|
|
There was a problem hiding this comment.
getSamplePath() expects demosBaseUrl without a trailing slash (it does replace(demosBaseUrl + '/', '')). In this PR docs/jquery/.../environment.json sets demosBaseUrl with a trailing slash, which will prevent the base URL from being stripped and break jQuery sample path resolution. Fix by normalizing demosBaseUrl (strip trailing /) before calling getSamplePath(), or make getSamplePath() robust to either form.
| ) | ||
| : null; | ||
|
|
||
| addFooter(widget, 'jsfiddle', null, null, onJsFiddle); |
There was a problem hiding this comment.
addFooter(...) is called even when onJsFiddle is null, which will render an "Edit in:" label with no buttons. Consider only calling addFooter when at least one editor handler is present, or make addFooter a no-op when no buttons will be added.
Comment on lines
+251
to
+254
| const docsPlatform = process.env.DOCS_PLATFORM; | ||
| const found = docsPlatform | ||
| ? (Object.values(PLATFORMS) as PlatformContext[]).find(p => p.lower === docsPlatform) | ||
| : undefined; |
There was a problem hiding this comment.
DOCS_PLATFORM can be values like web-components (see platform keys used elsewhere), but this lookup only matches exact PlatformContext.lower values (e.g. webcomponents). That means getPlatformContext() can silently fall back to the default when DOCS_PLATFORM uses the dashed form. Normalize docsPlatform (e.g. map web-components → webcomponents, lowercase, etc.) before matching.
Comment on lines
+182
to
+186
| // Since we're doing string replacement (not index-based), just replace all. | ||
| for (const { fullMatch, component } of replacements) { | ||
| updated = updated.replace(fullMatch, component); | ||
| changed = true; | ||
| } |
There was a problem hiding this comment.
The replacement loop uses updated.replace(fullMatch, component), which only replaces the first occurrence of fullMatch each time. If a file contains two identical embed-sample blocks, only the first will be replaced and the rest will be left unchanged. Apply replacements using match indices (slice/splice in reverse order) or use replaceAll/a global regex so every occurrence is handled.
Comment on lines
+171
to
+175
| const src = urlToSrc(rawUrl); | ||
| const alt = isUrlLabel(rawLabel) ? labelFromPath(src) : rawLabel.trim(); | ||
|
|
||
| const component = `<Sample src="${src}" height={${DEFAULT_HEIGHT}} alt="${alt}"/>`; | ||
|
|
There was a problem hiding this comment.
alt is interpolated directly into alt="${alt}" without escaping. If the original label contains a double quote (or other characters significant to MDX/HTML attributes), the generated <Sample .../> will be invalid MDX and could inject unintended markup. Escape at least " (and ideally other entities) when building the component string.
Comment on lines
+297
to
302
| - дс | ||
|
|
||
| {/* <Sample src="/grid/cell-merging-custom/index.html" height={428} alt="Cell Merging"/> */} | ||
|
|
||
| <Sample src="/grid/cell-merging-custom/index.html" height={428} alt="{Platform} Chip Example"/> | ||
|
|
There was a problem hiding this comment.
This section contains stray text (- дс) and a commented-out <Sample> instance, and the active <Sample> has an unrelated alt value ("{Platform} Chip Example"). This looks like an accidental/manual edit that will ship into the docs. Remove the stray lines and use an appropriate alt (e.g. matching the sample/topic).
Suggested change
| - дс | |
| {/* <Sample src="/grid/cell-merging-custom/index.html" height={428} alt="Cell Merging"/> */} | |
| <Sample src="/grid/cell-merging-custom/index.html" height={428} alt="{Platform} Chip Example"/> | |
| <Sample src="/grid/cell-merging-custom/index.html" height={428} alt="Cell Merging Custom Strategy"/> |
Comment on lines
+16
to
+17
| "InstallPathMVC": "%%InstallPathMVC%%", | ||
| "demosBaseUrl": "https://igniteui.github.io/help-samples/25.1/EN/" |
There was a problem hiding this comment.
demosBaseUrl includes a trailing /, but getSamplePath() in src/scripts/sample-widget.ts assumes demosBaseUrl has no trailing slash when stripping the base URL. This will break sample-path derivation for jQuery widgets unless the URL is normalized. Remove the trailing slash here or update the path-derivation logic to handle both forms.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.