npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nativescript-getters

v1.0.2

Published

A NativeScript plugin that adds six new getters – in addition to the native "getViewById" method – to retrieve one or more views by tag, type, class, property, value pair or style.

Downloads

29

Readme

NativeScript Getters Plugin

NPM version NPM bundle size NPM total downloads GitHub last commit

A NativeScript plugin that adds six new getters – in addition to the native getViewById method – to retrieve one or more views by tag, type, class, property, value pair or style.

Getting Started

Prerequisites

Basics

  • NativeScript installed and configured. (see CLI setup)
  • An IDE with intelligent code completion. (see VS Code)
  • A functional project to use the plugin. (see app templates)

Minimum versions

Installation

In Command prompt or Terminal navigate to your application root folder and run one of the following commands to install the plugin. (see docs)

ns plugin add nativescript-getters

or

npm install --save nativescript-getters

The --save flag will add the plugin as dependency in your package.json file.

Usage

Import the plugin at the top of your JavaScript or TypeScript file. It can be imported only once into the application entry point file. (see docs)

import 'nativescript-getters'

New methods have been added into the Frame, Page, layouts, tabs and texts classes. (see methods)

Examples

Get views by tags

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const actionBar = page.getViewsByTags('ActionBar')[0] // case sensitive
  const foundViews = page.getViewsByTags('Label', 'Button')

  console.log('action bar:', actionBar)
  console.log('found views:', foundViews)
}

The list of possible tags can be found on the modules page of the NativeScript API documentation. (see "Classes")

Get views by types

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const layouts = page.getViewsByTypes('layout')
  const foundViews = page.getViewsByTypes('field', 'list')

  console.log('layouts:', layouts)
  console.log('found views:', foundViews)
}

The list of available types: bar, picker, view, layout, list, text, tab, field and form. (see types.ts)

Get views by classes

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const mainTitle = page.getViewsByClasses('h1')[0]
  const foundViews = page.getViewsByClasses('text-primary', 'font-italic')

  console.log('main title:', mainTitle)
  console.log('found views:', foundViews)
}

Get views by identifiers

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const debugIds = page.getViewsByIdentifiers('debug') // alias: getViewsByIds('debug')
  const foundViews = page.getViewsByIdentifiers('my-id', 'another-id')

  console.log('debug ids:', debugIds)
  console.log('found views:', foundViews)
}

Get views by properties

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const texts = page.getViewsByProperties('text') // alias: getViewsByProps('text')
  const foundViews = page.getViewsByProperties('columns', 'width')

  console.log('texts:', texts)
  console.log('found views:', foundViews)
}

The list of possible property names can be found on the view page of the NativeScript API documentation.

Get views by val pairs

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const welcomeTexts = page.getViewsByValPairs(
    { name: 'text', value: 'Welcome' }
  )
  const foundViews = page.getViewsByValPairs(
    { name: 'columns', value: 'auto' },
    { name: 'width', value: '210' }
  )

  console.log('welcome texts:', welcomeTexts)
  console.log('found views:', foundViews)
}

The list of possible property names and their values can be found on the view page of the NativeScript API documentation.

Get views by styles

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const redViews = page.getViewsByStyles(
    { name: 'background', value: 'FF0000' }
  )
  const foundViews = page.getViewsByStyles(
    { name: 'visibility', value: 'collapsed' },
    { name: 'opacity', value: '0.5' }
  )

  console.log('red views:', redViews)
  console.log('found views:', foundViews)
}

Note: The color name (example: red or white) is converted by NativeScript to hexadecimal.

The list of possible styles can be found on the style page of the NativeScript API documentation.

Example in stand-alone mode

import { getViewsByTags } from 'nativescript-getters'

export function standaloneMode(view: View) {
  const foundViews = getViewsByTags.call(view, 'Label', 'Button')

  console.log('found views:', foundViews)
}

More info about call():

API

Methods

All methods return an array of views, except for the native method getViewById.

Name | Parameter(s) | Returns :--- | :----------- | :----- getViewsByTags | ...tagNames: string[] | View[] getViewsByTypes | ...typeNames: string[] | View[] getViewsByClasses | ...classNames: string[] | View[] getViewsByIdentifiers Alias: getViewsByIds | ...idNames: string[] | View[] getViewsByProperties Alias: getViewsByProps | ...propNames: string[] | View[] getViewsByValPairs | ...valPairs: ValPair[] ValPair: { name: string, value: string } | View[] getViewsByStyles | ...styles: ValPair[] ValPair: { name: string, value: string } | View[]

Native method

The native method returns only a view. Its name is written in the singular (getView...).

Name | Parameter | Returns :--- | :-------- | :----- getViewById | idName: string | View

Known issues

VSCode IntelliSense

If the following TypeScript declaration error occurs, you need to open the application entry point file (and keep it open) or click on the tab of the file already open.

Property 'getViewsBy...' does not exist on type 'View'. ts(2339)

VSCode IntelliSense now remembers the entry point of the application and recognizes the declaration of new methods.

Vue.js

The plugin may not work properly with these symlinked. It is because webpack resolves symlinks to their real locations by default.

A workaround for this issue is to manually disable symlinks resolution in webpack:

const config = {
  resolve: {
    // resolve symlinks to symlinked modules
    symlinks: false
  }
}

Question? Idea?

If you have a question about how nativescript-getters works or an idea to improve it, the Discussions tab in GitHub is the place to be.

However, if you get an error, you should open an issue.

Contributing

See CONTRIBUTING for more information.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Benjamin Grand @bgrand_ch